html - 在移动 View 中重新排列列顺序

Question

我有一个 2 列布局(C1 和 C2)。

在 C1 内，我有 3 个盒子(B1、B2 和 B3)。

在 C2 里面我有 1 个盒子 (B4)。

在移动 View 中，我想使框的垂直顺序为:B1-B2-B4-B3。

如何做到这一点？我愿意使用 flex box，但发现语法有点困惑。

Answer 1

我觉得不使用flex是可以的... 你描述的效果是可以实现的(但不是使用你说的HTML结构)——调整HTML结构，把B3放在C2里面，然后把B4放在C1和C2之间。

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>