引导列：将中间列放在移动设备上的单独行中

问题描述

我在引导程序上的列有问题，我找不到解决问题的方法。

我希望它看起来像在PC上：

并在移动设备上：

具有以下行和列， 有人知道怎么做？

<div class="container">
     <div class="col-sm-4">
     1
     </div>
     <div class="col-6">
     2
     </div>
     <div class="col-sm-4">
     3
     </div>
</div>

解决方法

您可以使用Bootstrap order classes order-*和order-sm-*来设置顺序。

在您的示例中：

• 第1列-我们不需要为它提供一个类，因为它始终处于创建位置。
• 第2列为order-sm-2 order-3，因此它在大于576像素的屏幕上显示为2，在所有其他屏幕上显示为3。
• 第3列是order-sm-3 order-2，因此它在大于576像素的屏幕上显示为3，在所有其他屏幕上显示为2。

断点为sm的示例：

.row div {
  border: 1px solid #ccc;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 col-sm-4"> 1 </div>
    <div class="col-sm-4 col-6 order-sm-2 order-3"> 2 </div>
    <div class="col-4 col-sm-4 order-sm-3 order-2"> 3 </div>
  </div>
</div>

具有较大断点的示例，除了使用较大的断点外，使用完全相同的类，因此您可以在摘要中比较结果：

.row div {
  border: 1px solid #ccc;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 col-lg-4"> 1 </div>
    <div class="col-lg-4 col-6 order-lg-2 order-3"> 2 </div>
    <div class="col-4 col-sm-4 order-lg-3 order-2"> 3 </div>
  </div>
</div>