我刚开始学习 Bootstrap，我遇到了网格系统。我在玩，注意到网格列总是从左边开始，然后向右移动，将 div 一个接一个地放置。如何让它们一个接一个地出现？ 下面是一些示例代码:
<body>
<div class="container-fluid">
<h2>Three Equal Columns</h2>
<div class="row">
<div class="col-4 bg-success">.col-1</div>
<div class="col-4 bg-warning">.col-2</div>
<div class="col-4 bg-success">.col-3</div>
</div>
</div>
</body>
这是一个 fiddle 。 https://jsfiddle.net/txdqjf8b/2/
如何让 col-1、col-2 和 col-3 一个一个地出现在另一个下方，这样以后如果我有一个 col-4、col-5 和 col-6，我希望它们像这样:
col-1 col-4 col-7
col-2 col-5 col-8
col-3 col-6 col-9
最佳答案
在 bootstrap 4 中，有一个选项可以使用 order-lg/md/sm/xs-1 对元素进行排序，如下所示。
<div class="col-md-4 order-md-1 bg-success">.col-1</div>
<div class="col-md-4 order-md-4 bg-warning">.col-2</div>
<div class="col-md-4 order-md-7 bg-success">.col-3</div>
<div class="col-md-4 order-md-2 bg-success">.col-4</div>
<div class="col-md-4 order-md-5 bg-warning">.col-5</div>
<div class="col-md-4 order-md-8 bg-success">.col-6</div>
<div class="col-md-4 order-md-3 bg-success">.col-7</div>
<div class="col-md-4 order-md-6 bg-warning">.col-8</div>
<div class="col-md-4 order-md-9 bg-success">.col-9</div>
我已经更新了你的 fiddle 。这是 DEMO
您可以在文档中获得更多清晰度 https://v4-alpha.getbootstrap.com/utilities/flexbox/#order
上面的代码我已经完成了，只适用于中等尺寸的屏幕。这样您就可以决定大屏幕和小屏幕的订单。假设如果你想普遍应用然后使用 order-1 如下。
<div class="col-4 order-1 bg-success">.col-1</div>
<div class="col-4 order-4 bg-warning">.col-2</div>
<div class="col-4 order-7 bg-success">.col-3</div>
<div class="col-4 order-2 bg-success">.col-4</div>
<div class="col-4 order-5 bg-warning">.col-5</div>
<div class="col-4 order-8 bg-success">.col-6</div>
<div class="col-4 order-3 bg-success">.col-7</div>
<div class="col-4 order-6 bg-warning">.col-8</div>
<div class="col-4 order-9 bg-success">.col-9</div>
这是 DEMO
关于html - 如何将 bootstrap 网格列一个一个地堆叠在另一个下方而不是一个并排地堆叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47687823/