如何更改断点后列的顺序？

Question

我一行有 3 列。屏幕宽度达到小于 md (768px) 后有一个断点。在这一点上，我希望第一个容器成为最后一个容器，而另外两个保持在一条线上。我该怎么做？

代码：

<div class="container">
  <div class="row">
    <div class="col-md-4">

    </div>
    <div class="col-md-3">

    </div>
    <div class="col-md-3">

    </div>
  </div>
</div>

Answer 1

使用顺序类...

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

Codeply

如何更改断点后列的顺序？

How to change order of the columns after breakpoint?

bootstrap-5