两列布局，无需使用JavaScript即可重新排序项目

Question

有没有一种方法可以将2列布局转换为带有媒体查询的1列布局？

2列布局的条件：

1. 项目应在列中一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置（顺序）可以由html标记元素位置强加

1列布局的条件：

1. 项目应该一个接一个地流动
2. 列中的项目将具有不同的高度
3. 不能通过html标记强加项目位置（！）（应通过CSS控制）

我一直在考虑为列使用两个单独的容器-但当布局变为1列时，该构造会阻止我在列之间重新排序（混合）元素。我似乎应该将所有元素放置在一个容器中-然后对于1列布局，可以将flex用于重新排序，但是在那种情况下如何实现2列布局？

要模拟媒体查询行为，请从主容器中删除类“一栏”。

<div id="container" class="one-column"> -> <div id="container" class="">

在此概念中，主要问题在于，列（2列布局）中的项目不会直接一个接一个地流动（右列中的项目之间存在间隙）。

这是我到目前为止所取得的成就：

<div id="container" class="one-column"> -> <div id="container" class="">

* {
  box-sizing: border-box;
}
div {
  width: 100%;
  height: 100px;
  float: left;
}
#container.one-column {
  display: flex;
  flex-direction: column;
  height: auto;
}
#container {
  display: block;
}
.col1 {
  width: 60%;
  background-color: red;
  height:300px;
  float: left;
}
.col2 {
  width: 40%;
  background-color: blue;
  border: 1px solid white;
  float: right;
}
.one-column > div {
  width: 100%;
}

JSFiddle：https ://jsfiddle.net/3b6htt1d/40/

Answer 1

2 列布局的条件：

1. 项目应该在列中一个接一个地流动
2. 列内的项目将具有不同的高度
3. 项目位置（顺序）可以通过 html 标记元素位置来施加

这正是 CSS Columns 的作用。

1 列布局的条件：

1. 物品应该一个接一个地流动
2. 列内的项目将具有不同的高度
3. 项目位置 (!) 不能由 html 标记强加（应通过 css 控制）

这正是 Flexbox 和column方向可以做的事情。

因此，如果将两者结合起来，对于 2 列，它们将从上到下流动，如左图示例所示，对于 1 列，您可以使用 控制它们的位置order。

这样您就可以避免固定高度并获得动态/灵活尺寸的物品。

更新了小提琴

堆栈片段

* {
  box-sizing: border-box;
}
div {
  width: 100%;
  height: 100px;
}
#container.one-column {
  display: flex;
  flex-direction: column;
  height: auto;
}
.col1 {
  width: 60%;
  background-color: red;
  height:300px;
}
.col2 {
  width: 40%;
  background-color: blue;
  border: 1px solid white;
}
.one-column > div {
  width: 100%;
}

@media (min-width: 500px) {
  #container.one-column {
    display: block;
    columns: 2;
  }
  #container.one-column > div {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .zcol1 ~ .col1 {
    background-color: yellow;
    height:100px;
  }
}

<div id="container" class="one-column">
  <div class="col1" style="order:2;">
    ONE
  </div>
  <div class="col2" style="order:1;">
    TWO
  </div>
  <div class="col1" style="order:4;">
    THREE
  </div>  
  <div class="col2" style="order:3;">
    FOUR
  </div>
</div>

这是我的另一个答案，这可能是另一种选择，将 Flexbox 与float.

• 使用弹性盒防止下一行占用前一行中最高项目的高度？

根据评论更新

这是一个结合 Flexbox 和 的版本float，它生成屏幕截图显示的布局：

• 更新了演示