Question

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

重新排序

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

Answer 1

您需要在较大的断点处重新排序，因为引导程序是移动设备优先使用的方法（这意味着它在媒体查询中使用min-width），因此当仅使用sm时，它将应用{ {1}}及更高版本（包括sm和md）。

lg

要了解BS4中的<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，order-X-first和order-X-last，因此这里是这些类的摘要。您可以在此answer

中看到它们

order-X-0

Answer 2

这是Bootstrap的默认行为，并且是预期的。

简而言之，所有引导程序的断点后缀（-sm -md ...）从该断点开始工作。

因此，如果您设置col-sm-6，则意味着您的列将是sm断点以及md和lg中的行的一半，除非您将其覆盖（例如{ {1}}）。

一切都回到here（在媒体查询中使用最小宽度）

Answer 3

您尝试过执行订单1，这为大屏幕设置了默认设置

/image_raw

来源：Column ordering in Bootstrap 4

Answer 4

我也遇到了一些问题。以下代码使它对我有用：

 <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6 order-sm-2 order-1">
                <!-- some contents here -->Content1
                </div>
                <div class="col-sm-6 order-sm-1 order-2">
                <!-- some contents here -->Content2
             </div>
       </div>
  </div>

编辑：从相应的列中删除了.order-md类。

Bootstrap 4订购类

4 个答案: