3.2.4 重排序

1．排列顺序

使用.order-*类选择符，可以对空间进行可视化排序，系统提供了.order-1到.order-12等12个级别的顺序，在主流浏览器和设备宽度上都能生效。

【例3.10】排列顺序示例。

在IE 11浏览器中运行结果如图3-15所示。

可以使用.order-first快速更改一个顺序到最前面，使用.order-last更改一个顺序到最后面。

【例3.11】order-first和order-last类示例。

在IE 11浏览器中运行结果如图3-16所示。

2．列偏移

在Bootstrap中可以使用两种方式进行列偏移。

■ 使用响应式的.offset-*类偏移方法。

■ 使用边距通用样式处理，它内置了诸如.ml-*、.p-*、.pt-*等实用工具。

1）偏移类

使用.offset-md-*类可以使列向右偏移，通过定义*的数字，则可以实现列偏移，如.offset-md-4则是向右偏移四列。

【例3.12】偏移类示例。

在IE 11浏览器中运行结果如图3-17所示。

2）使用margin类

在Bootstrap 4中，可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现水平隔离的效果。

【例3.13】使用margin类示例。

在IE 11浏览器中运行结果如图3-18所示。