css - 将有序的元素数组拆分为 HTML 中的交替列

Question

我正在尝试创建一个响应式 HTML 布局，它将显示一组有序数据。

在较小的屏幕尺寸上，它将按顺序显示一栏内容。但是，在更大的屏幕尺寸上，它会显示两列，元素在两列之间交替。

例如:小

| 1 |
| 2 |
| 3 |
| 4 |

例如。大

| 1 | 2 |
| 3 | 4 |

除此之外，在两列布局中，左列中的元素应为float: right，而右列中的元素应为float: left，以便无论元素的宽度如何，它们都会在中心相遇。

到目前为止，我想到的唯一想法是创建两个列容器，一个将所有元​​素向右浮动，一个将所有元​​素向左浮动。但是，我还没有弄清楚如何在 order 数组中分配元素，这样我就不必将它分成两部分，因为这意味着当将屏幕尺寸更改为较小的屏幕时，一列元素将不再有序。

---

编辑1:每个元素的高度可能不一样，放置元素时，应该放在总高度较小的高度上。

|    ------|----------|
|    |  1  |     2    |
|    |     |----------|
|    |     |   3   |  |
|    ------|-------   |

这是一个样本 jsfiddle大约我正在尝试做的事情，除了可能不那么hacky。我试图实现的布局类似于 this , 除了元素有特定的顺序。

Answer 1

所以经过一些测试，我和一个 friend 认为这可能是最好的方法，即在左侧元素上使用 display: flex 而在右侧元素上使用 float: right jsfiddle 中显示的正确元素.