更改Flexbox元素列表的順序以讀取Bootstrap中的自上而下左右4

Question

我正在使用帶有flexbox的Bootstrap 4。我在container-fluid中有一個分類爲col-xs-12 col-sm-6 col-md-4 col-xl-3的項目的按字母順序排列的列表。這些列是響應式的，項目數量是動態的。因此，不可能知道容器的高度。

可以有1,2，3或4列，並且所有行的設計寬度完全相同。

DEMO： https://codepen.io/troutr/pen/XKQYjV

下面是我想怎麼才能起作用的圖像。

出於可用性的原因，如果項目從上到下，從左到右排列，將會很好。是否有可能使用CSS做到這一點？我認爲可能使用媒體查詢和flexbox的order屬性。

Answer 1

試試CSS屬性column-count。同時檢查瀏覽器兼容性here。

ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
ul { 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul> 
 
<hr> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
</ul>