Bootstrap 4列订购用例

Question

我正在寻找Bootstrap 4中列排序的实际用例。

我了解它的工作原理，但是为了加深理解，我想看看一些为什么要使用它的示例。

以下是文档：

https://getbootstrap.com/docs/4.0/layout/grid/#order-classes 明确地说，我正在寻找使用案例的原因，而不是如何实现。

Answer 1

我已经使用列顺序来根据设备大小更改图像和随附文本的顺序。对于小型设备，我首先显示文本，然后显示图像，而对于大型设备，我将图像显示在左侧，文本在右侧。

Answer 2

我经常将其用于列表中的交替布局。就像有3个条目，每个条目都有一个图像和一个文本，我希望第二个条目与另两个条目完全相反，但只能在桌面上。在移动设备上，应该始终首先显示图片。

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      Image
    </div>
    <div class="col-12 col-md-6">
      Text
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-md-6 order-md-2">
      Image
    </div>
    <div class="col-12 col-md-6 order-md-1">
      Text
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-md-6">
      Image
    </div>
    <div class="col-12 col-md-6">
      Text
    </div>
  </div>
</div>

结果桌面：

Image | Text
Text  | Image
Image | Text

结果移动电话：

Image
Text
-----
Image
Text
-----
Image
Text

Answer 3

通常，列排序用于在不同的屏幕宽度上创建不同的布局。这是一些用例，其中大多数用于在移动/小型设备上确定垂直内容的优先级。

首先在移动设备上对重要内容进行优先排序。-一个非常典型的用例是带有左侧边栏和主要内容区域的简单2列布局。

列排序使我们可以在移动设备上颠倒顺序，以便侧边栏（不太重要的内容）垂直堆叠在主要内容下方。

优先考虑移动设备上的导航。此用例类似。假设布局的右侧栏包含我们首先要在移动设备上浏览的导航。再次可以使用排序来反转移动设备上的布局。