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

Question

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

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

在C2里面我有1个盒子（B4）。

在移动视图中，我想使框的垂直顺序为：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>

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

Re-arrange column order in mobile view

html

css

multiple-columns

responsive-design