对其

使用flexbox对齐工具来垂直和水平对齐列。

垂直对齐

列包装(Column wrapping)

如果在一行中放置了超过12个列，每组额外的列将作为一个单位，放入新的一行。

列间隔

在flexbox中，将列间隔到新的行上需要一个小技巧：在你想将列打散到新的行上的地方添加一个 width: 100%的元素。通常情况下，这是通过多个.rows来实现的，但并不是每个实现方法都能做到这一点。

您也可以使用我们的响应式显示工具在特定的断点处应用此间隔。

重新排列

排列类

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 5 across all six grid tiers.

使用.order-类来控制内容的显示顺序。这些类是响应的，所以你可以通过断点来设置顺序(例如，.order-1.order-md-2)。

还有响应式.order-first和.order-last类，分别通过应用order: -1和order: 6来更改元素的顺序。 这些类也可以根据需要与编号的.order- *类混合使用。

偏移列

你可以用两种方式来偏移网格列：我们的响应式.offset-网格类和我们的边距工具。网格类的大小与列的大小相匹配，而margins对于快速布局来说更有用，因为偏移的宽度是可变的。

偏移类

使用.offset-md-*类将列向右移动。这些类将一列的左边距增加*列。例如，.offset-md-4将.col-md-4移动到四列上。

响应式偏移量：

边距工具类

随着在v4中移至flexbox，你可以使用像.mr-auto这样的边距实用程序来强制兄弟列之间的距离。

独立列类

.col-*类也可以在.row之外使用，给元素一个特定的宽度。当列类被用作行的非直接子类时，就会省略paddings。

这些类可以与实用程序一起使用，来创建响应的浮动图片。如果文本较短，可以使用.clearfix包装器包装内容以清除浮动。