Question

我有一个非常简单的代码段：

<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>

除了手机，我想在所有设备上都保留结果和搜索。在手机上时，我要在屏幕顶部搜索。我可以在bootstrap 4中看到向左/向右拉动已被替换。但是在上面的示例中，结果是在桌面视图中显示的吗？

应该如何理解订单？我希望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

自举4和设备类型后的订购

1 个答案: