Bootstrap 4 如何处理不同屏幕尺寸的列排序？

Bootstrap4 中的列排序

为了在不同屏幕尺寸上灵活排列列，Bootstrap 提供了一系列选项。

响应式排序在引导程序中4.0:

Bootstrap 4 消除了对其响应式排序类使用“xs-”前缀。相反，“push-”和“pull-”修饰符指定视口和移动列的单位数。例如，要在移动设备上实现所需的 1-3-2 顺序：

<div>
<p><strong>Bootstrap 4.1 及更高版本中的响应式排序</strong>:</p>
<p>Bootstrap 4.1 引入了 Flexbox，简化列排序。订单类别范围从“order-1”到“order-12”。列可以响应式排序，例如“order-md-12 order-2”（MD 上最后一个，XS 上第二个）：</p>
<pre class="brush:php;toolbar:false"><div>
<p><strong>替代排序方法</strong>:</p> <p>除了响应式排序类之外，flexbox 方向实用程序还提供了另一种方法：</p>
<pre class="brush:php;toolbar:false"><div>
<p><strong>附加说明</strong>：</p>
<ul>
<li>列排序是相对于其父.row。</li>
<li>响应类允许精细控制over order，实现跨多种屏幕尺寸的复杂排列。</li>
<li>Bootstrap 4.1及以上版本不再支持4.0之前版本中使用的push/pull类。</li>
</ul>
</div>