html - 在移动 View 中将右侧 div 置于左侧

Question

是否可以借助 CSS 在移动 View 中将右侧 div 堆叠在左侧 div 之上？默认行为是右侧 div float 在左侧 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>

尝试实现此图的第三种布局。

Answer 1

您可以通过使用 flex box 来实现!将您的 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 属性决定了哪个元素先堆叠。您可以在此处阅读有关 flex box 的更多信息: https://css-tricks.com/snippets/css/a-guide-to-flexbox/