将有序数组的项拆分为HTML中的交替列

Question

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

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

例如：小

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

实施例。大

| 1 | 2 |
| 3 | 4 |

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

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

编辑1：每个元素的高度可能不同，放置元素时，它应该会移到整体高度较小的高度。

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

这是我正在尝试做的样本jsfiddle，除了可能不那么黑客。我试图实现的布局类似于this，除了元素具有特定的顺序。

Answer 1

经过一些测试后，我和朋友决定这可能是在左侧元素上使用display: flex而在右侧元素上使用float: right的最佳方式，如此{{3}所示}。