引导程序：在小显示屏中逐列推送

Question

在比移动设备更大的显示器中，我希望具有这种配置（按此顺序）：

列-大2- B栏大8- C栏大2

在移动设备中，我希望第一行（在不同行中）在第二行之后移动：

B栏大12- 列-大6- C栏大6

有人可以告诉我它是否可能，如果可以，我该怎么办？谢谢

 <div class="container">
     <div class="row">
         <div class="col-lg-2"></div>
         <div class="col-lg-8"></div>
         <div class="col-lg-2"></div>
     </div>
 </div>

Answer 1

要移动使用col-*：

在这里学习：https://getbootstrap.com/docs/4.0/layout/grid/

并使用顺序：https://getbootstrap.com/docs/4.0/utilities/flex/#order

请参见小提琴：https://jsfiddle.net/L50gsumj/3/

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 <div class="container">
     <div class="row">
         <div class="col-md-2 col-6   order-2 order-md-1">a</div>
         <div class="col-md-8 col-12  order-1 order-md-2">b</div>
         <div class="col-md-2 col-6   order-3 order-md-3">c</div>
     </div>
 </div>

Answer 2

如果您要进行mobile first，则应首先按照想要的顺序在HTML中定义列：

<div class="container">
  <div class="row">
    <div class="col-12">
      B
    </div>
    <div class="col-6">
      A
    </div>
    <div class="col-6">
      C
    </div>
  </div> 
</div>

这可以确保它在小型设备中看起来像您想要的。然后，我们可以为大型设备添加更多样式。

然后在更大的设备上（您说的比手机大），它对应于引导程序中的col-md-*类。您可以将其添加到列中。 同样，由于您希望列A首先出现，因此您可以使用引导类order-md-*设置其顺序。顺序越小，位置越早。

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 order-md-2">
      B
    </div>
    <div class="col-6 col-md-2 order-md-1">
      A
    </div>
    <div class="col-6 col-md-2 order-md-3">
      C
    </div>
  </div> 
</div>

结果：

请参见小提琴：http://jsfiddle.net/aq9Laaew/61343/