Bootstrap 4订购类

用户9741470

我对bootstrap 4.1重新排序有疑问。根据文档：

重新排序

使用.order-类来控制内容的视觉顺序。这些类是响应式的，因此您可以按断点设置顺序（例如.order-1 .order-md-2）。包括对所有五个网格层的1到12的支持。

我试图使用.order文档中显示的类仅在中小型屏幕上设置重新排序，但是它也会在较大的断点处对内容进行重新排序，这是我做错了吗？

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-lg-4 order-sm-2">
        <!-- some contents here -->
        </div>
        <div class="col-sm-12 col-lg-8 order-sm-1">
        <!-- some contents here -->
        </div>
    </div>
</div>

您需要在较大的断点处重新排序，因为引导程序是移动设备优先使用的方法（这意味着它正在min-width媒体查询中使用），因此仅在使用引导程序时，sm它会上下应用属性sm（包括md和lg）。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-lg-4 order-sm-2 order-lg-1">
      mobile 2nd and then desktop 1st
    </div>
    <div class="col-sm-12 col-lg-8 order-sm-1 order-lg-2">
      mobile 1st and then desktop 2st
    </div>
  </div>
</div>

还有一两件事，以了解order在BS4，是你，你可以使用order-X-first，order-X-last并且order-X-0，所以这里用这些类的一个片段。您可以在此答案中看到它们

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-lg-4 order-sm-last order-lg-first">
      mobile 2nd and then desktop 1st
    </div>
    <div class="col-sm-12 col-lg-8 order-sm-first order-lg-last">
      mobile 1st and then desktop 2st
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。