如何在移动版Bootstrap 4中堆叠列

Question

我想在桌面上堆叠2列，但在移动设备上，我希望顺序交换到另一种方式。

<div class="row bottom-footer">
   <div class="col-lg-6 col-md-6 col-sm-12 order-2 order-sm-12">
      <span class="">text</span>
   </div>
   <div class="col-lg-6 col-md-6 col-sm-12 order-1 order-col-md-6">
      <span class="">text</span>
   </div>
</div>

Answer 1

您只需要对第一列进行重新排序。使用order-last和order-sm-first可以做到这一点。

​

<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="row bottom-footer">
  <div class="col-lg-6 col-md-6 col-sm-12 order-last order-sm-first">
    <span class="">text1</span>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12 ">
    <span class="">text2</span>
  </div>
</div>

​

由于您使用的是col-md-6，因此不需要col-lg-6。

Answer 2

您需要在两个div上分别使用order-2 order-sm-1和order-1 order-sm-2

order-1和order-2将从0px开始应用到移动宽度，order-sm-*将在移动屏幕宽度之后开始应用。

​

<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="row bottom-footer">
  <div class="col-lg-6 col-md-6 col-sm-12 order-2 order-sm-1">
    <span class="">text1</span>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12 order-1 order-sm-2">
    <span class="">text2</span>
  </div>
</div>

​