在移动视图中重新排列列顺序

Question

我有一个2列布局（C1和C2）。

在C1里面我有3个盒子（B1，B2和B3）。

C2内部我有1个盒子（B4）。

在移动视图中，我想制作方框的垂直顺序：B1-B2- B4 -B3。

如何做到这一点？我打开使用弹性框，但发现语法有点令人困惑。

Answer 1

我认为可以不使用flex ...你可以实现你描述的效果（但不使用你提到的HTML结构） - 调整HTML结构并将B3放在C2中，然后在C1和C2之间放置B4。

Pen here

body {
  color: white;
  text-align: center;
  font-family: 'Arial';
}
  .c1, .c2 {
  width: 50%;
  float: left;
  clear: both;
}
.b1 {
  background: grey;
  height: 100px;
}
.b2 {
  background: dodgerblue;
  height: 100px;
}
.b3 {
  background: turquoise;
  height: 100px;
}
.b4 {
  background: gold;
  height: 100px;
  width: 50%;
  float: left;
}

@media screen and (max-width: 768px) {
  .c1, .c2 {
    width: 100%;
  }
  .b4 {
    width: 100%;
  }
}

<div class="c1">
  <div class="b1">.b1</div>
  <div class="b2">.b2</div>
</div>
<div class="b4">.b4</div>
<div class="c2">
  <div class="b3">.b3</div>
</div>