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>

我如何在Bootstrap 4中为移动设备堆叠列

2 个答案: