Question

我已经先使用order-sm-first来将其用于旧的xs。 <576px？

所有查询中的顺序优先工作

<div class="col-md-6 col-sm-12 order-sm-first">

Answer 1

我想您想从引导程序中获取order-0实用程序。 Bootstrap4首先是移动设备，因此理想情况下，您应该以应该首先在Mobile中发生的方式编写HTML。然后，对于其他视图，更改HTMl元素的顺序。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-xl-3 p-2 bd-highlight">First flex item</div>
  <div class="order-xl-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-xl-1 p-2 bd-highlight">Third flex item</div>
</div>

Answer 2

您正在寻找order-first。仅使用实际的-xs中缀。 xs断点（<576px）仍然存在，但是现在它是默认断点或隐式断点，因此您无需专门使用-xs。

还知道order-first的真正含义是“ xs and up”上的1st，因此需要根据需要使用更大的断点来覆盖它……

<div class="container">
    <div class="row">
        <div class="col-6">
            1 (first on sm and up)
        </div>
        <div class="col-md-6 col-sm-12 order-first order-sm-last">
            2 (first on xs)
        </div>
    </div><!--/row-->
</div><!--container-->

https://www.codeply.com/go/WMnCWPikCh

XS Bootstrap4中的顺序优先

2 个答案: