在 Bootstrap 4 中更改 Flexbox 元素列表的顺序以从上到下从左到右阅读

Question

我正在使用 Bootstrap 4 和 flexbox。我有一个 container-fluid 中分类为 col-xs-12 col-sm-6 col-md-4 col-xl-3 的按字母顺序排列的项目列表。列是响应式的，项目的数量是动态的。因此，无法知道容器的高度。

可以有 1、2、3 或 4 列，并且所有行的宽度设计为完全相同。

演示： https://codepen.io/troutr/pen/XKQYjV

这是我希望订单如何运作的图片。

出于可用性原因，如果项目按自上而下、从左到右的顺序排列会更好。是否可以使用 CSS 来做到这一点？我在想使用媒体查询和 flexbox 的 order 属性可能是可能的。

Answer 1

尝试 CSS 属性 column-count. Also check for browser compatibility 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>

在 Bootstrap 4 中更改 Flexbox 元素列表的顺序以从上到下从左到右阅读

Change order of Flexbox elements list to read top-down left-right in Bootstrap 4

html

css

bootstrap-4