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

【问题标题】：Bootstrap 4 - How to change order on mobile?Bootstrap 4 - 如何在移动设备上更改订单？
【发布时间】：2018-07-28 16:06:27
【问题描述】：

我正在使用由两列组成的 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>

【问题讨论】：

“正确的顺序”？我看不出它背后的逻辑。似乎是随机的。这对于响应式布局来说并不理想。
看我提供的截图，没有什么乱七八糟的。不理想？您的陈述或您的全部评论都没有任何意义。
代码中的数字与图像不匹配...真的不清楚您要做什么... 但是您无法更改 @ 987654324@ 容器之间。
数字确实与图像匹配，并且您可以在代码中看到只使用一个容器。嘘
还是不清楚你想为我做什么。您在代码中有 right 1 作为文本，在图像中有 order = 1，这些是相同的框吗？如果是这样，您就不能这样做，因为您无法更改容器之间的顺序（如前所述）不要将容器（=== div）与具有 container 类的 div 混合

标签： html css bootstrap-4

【解决方案1】：

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

 <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>

在大屏幕上

在中等屏幕上

在小屏幕上

【讨论】：