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

【问题标题】：Re-arrange column order in mobile view在移动视图中重新排列列顺序
【发布时间】：2015-05-23 09:06:01
【问题描述】：

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

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

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

在移动视图上，我想设置框的垂直顺序：B1-B2-B4-B3。

如何做到这一点？我对使用 flex box 持开放态度，但发现语法有点混乱。

【问题讨论】：

我认为不可能从第二个父级获取一个 DIV 并仅使用样式将其放入第一个父级，看起来您需要根据移动/桌面视图预加载不同的标记，那里是一个项目，我们使用masonry.desandro.com 根据视图重新排列列，但这真的很痛苦，所以我会预加载所需的标记并根据屏幕大小简单地显示/隐藏它:)
这是您可以使用 CSS 网格做的事情，但要在大多数浏览器中使用它还需要几年时间。

标签： html css responsive-design multiple-columns

【解决方案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>

【讨论】：