更改Flexbox元素列表的顺序以在Bootstrap 4中自上而下读取左上角

Question

我正在使用带有flexbox的Bootstrap 4。我在ASSERT_EQ( vec, deq )中列出了按字母顺序排列的col-xs-12 col-sm-6 col-md-4 col-xl-3项列表。列是响应式的，项目数是动态的。因此，无法知道容器的高度。

可以有1,2,3或4列，并且所有行的宽度都完全相同。

样本： https://codepen.io/troutr/pen/XKQYjV

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

出于可用性的原因，如果物品是从上到下，从左到右排序的话会很好。是否可以使用CSS执行此操作？我当时认为可以使用媒体查询和flexbox的container-fluid属性。

Answer 1

尝试使用CSS属性column-count。还要检查浏览器兼容性here。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;