Bootstrap 4 并在设备类型之后排序

Question

我有这个非常简单的 sn-p：

<div class="row">
  <div style="border:1px solid red" class="col-sm-8 order-sm-12">result</div>
  <div style="border:1px solid red" class="col-sm-4 order-sm-1">search</div>
</div>

我想在除手机以外的所有设备上显示result和search。在手机上时，我想在屏幕顶部进行搜索。我可以在引导程序 4 中看到向左/向右拉已被订单替换。但是在上面的示例中 result 在桌面视图中被拉到了右边？

顺序应该如何理解？我希望 order-sm-1 会出现在一个很小的屏幕上，它将是第一个（添加到顶部），而 order-sm-1 意味着添加最后一个？在其他尺寸上，该类将被忽略？

Answer 1

当您只使用order-sm-* 时，它的意思是“小而大”。因此，您需要使用...

<div class="container">
    <div class="row">
        <div style="border:1px solid red" class="col-sm-8 order-1 order-sm-0">result</div>
        <div style="border:1px solid red" class="col-sm-4 order-0">search</div>
    </div>
</div>

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