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

时间:2021-05-19 15:00:29

标签: bootstrap-5

我在一行中有 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>

1 个答案:

答案 0 :(得分: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