Bootstrap 4 - 如何在移动设备上更改订单？

Question

我正在使用Bootstrap 4进行​​响应式布局，其中包含两列。两列总共有9个div，第一列有4个，第二列有5个。如果断点低于LG，我想更改列内div的顺序。

这是一个解释和我想要达到的正确顺序：

我现在有什么：

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="mb-4">
                left 1
            </div>
            <div class="mb-4">
                left 2
            </div>
            <div class="mb-4">
                left 3
            </div>
            <div class="mb-4">
                left 4
            </div>
        </div>
        <div class="col-lg-4">
            <div class="mb-4">
                right 1
            </div>
            <div class="mb-4">
                right 2
            </div>
            <div class="mb-4">
                right 3
            </div>
            <div class="mb-4">
                right 4
            </div>
            <div class="mb-4">
                right 5
            </div>
        </div>
    </div>
</div>

Answer 1

可以在Bootstrap 4中更改列的可视顺序，因为它使用弹性框。可以使用响应ordering classes using flex。
 我们可以为每个视口指定不同的顺序  使用order-xs-12，order-sm-2，order-md-0，order-lg-5，order-xl-last.We可以指定0-12的顺序，order-first和order-last for第一栏和最后一栏。

 <div class="container">
 <div class="row ">
   <div class="col-lg-8  col-md-6 col-sm-12 d-flex flex-column ">
     <div class="mb-4">
     left 1
     </div>
     <div class="mb-4 bg-info order-sm-last order-md-first order-lg-last ">
     left 2
     </div>
     <div class="mb-4">
     left 3
     </div>
     <div class="mb-4">
     left 4
     </div>
   </div>
   <div class="col-lg-4 col-md-6 col-sm-12 d-flex flex-column">
     <div class="mb-4">
     right 1
     </div>
     <div class="mb-4">
     right 2
     </div>
     <div class="mb-4 bg-success order-lg-last order-md-first order-sm-
    first">                
     right 3
     </div>
     <div class="mb-4">
     right 4
     </div>
     <div class="mb-4">
     right 5
     </div>
   </div>
</div>
</div>

在较大的屏幕上

在中等屏幕

小屏幕