在移动视图中将右侧div放在左侧

Question

然而它是一个基本的布局问题,可能有一个答案,但我找不到它,可能缺少一个合适的搜索字符串.在CSS的帮助下,是否可以在移动视图中将右侧div叠加在左侧div上？默认行为是左侧div下的右侧div浮动.

CSS:

.left {
    position: relative;
    float: left;
    background: #F48024;
    width:576px;
    height: 324px;
}
.right {
    position: relative;
    float: left;
    background: #EFF0F1;
    width:576px;
    height: 324px;
}

HTML:

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

要了解它,请查看图表.我需要在此图中给出第3个布局.

Answer 1

这可以作为快速修复：

@media screen and (max-width:480px){
    .main {
        display: flex;
        flex-direction: column-reverse;
    }
}

笔记：

您可能还必须使用其他flex相关的 css 道具来对齐和对齐div道具中的内容，例如justify-content和align-items。

但是如果你有很多div元素，它们都会颠倒过来。

div-n
...
div-2
div-1

Answer 2

你可以通过使用弹性盒来实现这一点!将你的CSS更改为:

.main{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}

.left {
    position: relative;
    background: #F48024;
    width:576px;
    height: 324px;
}

.right {
    position: relative;
    background: #EFF0F1;
    width:576px;
    height: 324px;
}

@media screen and (min-width:1152px){
  .main {
      justify-content: space-between;
  }

  .left {
      order:2;
  }

  .right {
      order:1;
  }
}

order属性首先确定哪个元素堆栈.您可以在此处阅读有关弹性框的更多信息:https: //css-tricks.com/snippets/css/a-guide-to-flexbox/