bootstrap-4 - 如何在引导程序的小屏幕中移动列？

Question

我有 3 列

---

(1) .col-md-4 | (2) .col-md-4 | (3) .col-md-2 | (4) .col-md-2

我希望在小屏幕（手机/小屏幕）中这样：

---

(1) | (4) |

(2) | (3) |

Answer 1

首先，据我所知，不是 3 列而是 4 列。

其次，您想要做的事情称为重新排序。您想对 md 断点下方的列重新排序。

这是你如何做到的：

<div class="container">
   <div class="row">
       <div class="col-md-4 order-1 order-md-1">1</div>
       <div class="col-md-4 order-3 order-md-2">2</div>
       <div class="col-md-2 order-4 order-md-3">3</div>
       <div class="col-md-2 order-2 order-md-4">4</div>
   </div>
</div>

从order-md-*中间断点开始，您可以指定每列的顺序。

并在order-*您指定中断点下方的顺序（即，这是默认的“移动优先”断点）。