將項目的數組分割爲HTML中的交替列

Question

我正在嘗試創建一個響應式HTML佈局，該佈局將顯示有序數據的數組。

在較小的屏幕尺寸上，它將按順序顯示一列內容。但是，在更大的屏幕尺寸上，它會顯示兩列，其中兩列之間交替出現。

例如：小

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

例。大

| 1 | 2 | 
| 3 | 4 | 

添加到這一點，在兩個欄佈局，左側欄中的元素應該是float: right，而右列應該是float: left使他們在中心無論寬度見面元素。

我到目前爲止唯一的想法是創建兩個列容器，一個將所有元​​素都浮動到右側，另一個浮動所有元素。但是，我還沒有弄清楚如何在訂單數組中分配物品，這樣我就不必將其分成兩部分，因爲這意味着在將屏幕大小更改爲較小的物品時，一列物品將不再有序。

---

編輯1：每個元素可能不具有相同的高度，並放置元素時，它應該到具有更小的總體高度的高度。

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

這是約我想要做的，但也許不太哈克樣本jsfiddle。我試圖實現的佈局與this類似，只是元素具有特定的順序。

Answer 1

所以一些測試後，我和一個朋友決定，這是可能是最好的辦法是同時使用在如本jsfiddle顯示正確的元素float: right左元素使用display: flex。