Bootstrap 4中的订单列不起作用

Question

​

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2">1
    </div>
    <div class="col-lg-4 col-md-12 order-1">2
    </div>
  </div>
</div>

我有两个专栏，我想以不同的方式在桌面和移动订购。订单-1在移动上正常工作。但它也能在桌面上工作。帮助我更改订单，只为移动视图在引导4。

​

Answer 1

引导首先是可移动的。您需要为更大的显示添加一个不同的类。

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2 order-sm-1">1
    </div>
    <div class="col-lg-4 col-md-12 order-1 order-sm-2">2
    </div>
  </div>
</div>

网格断点基于最小宽度媒体查询，这意味着它们适用于该断点及其上面的所有断点(例如，..order sm-*适用于小型、中型、大型和特大型设备，但不适用于第一个xs断点)。

注意，您有类order-2和order-1。这些类与order-xs-*相同。

因此，如果您希望只针对大型显示器(lg和xl)使用特殊规则，只需添加以下类：

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2 order-lg-1">1
    </div>
    <div class="col-lg-4 col-md-12 order-1 order-lg-2">2
    </div>
  </div>
</div>

Answer 2

你只需要这样做..。

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-12 order-md-2">1
        </div>
        <div class="col-lg-4 col-md-12 order-1">2
        </div>
    </div>
</div>

https://www.codeply.com/go/1niA4HHVoV