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>

I have 2 columns which I want to order in different ways on desktop and mobile. Order-1 works fine on mobile. But it works on desktop too. Help me to change order only for mobile view in Bootstrap 4.

Answer 1

Bootstrap首先是移动的。您需要为更大的显示添加不同的类。

<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