CSS 通过Bootstrap4调整列顺序

在本文中，我们将介绍如何使用Bootstrap4和CSS来调整列的顺序。通过合理地调整列的顺序，我们可以在不改变HTML结构的情况下，实现响应式布局中的错位和换行效果。

阅读更多：CSS 教程

使用Bootstrap4的列排序类

Bootstrap4 提供了一套用于调整列顺序的类。通过给列添加不同的类，我们可以在不同的屏幕尺寸下改变列的顺序。

使用order类

要改变列的顺序，我们可以使用order-*类来给列设定一个新的顺序值(*代表一个1-12的数字)。例如，我们可以通过下面的代码将第一列排在最后：

<div class="container">
  <div class="row">
    <div class="col-6 order-2">第二列</div>
    <div class="col-6 order-1">第一列</div>
  </div>
</div>

在上面的代码中，我们将第二列的顺序值设置为2，将第一列的顺序值设置为1。通过这样设置，我们可以将第一列显示在第二列的前面。

使用order-first和order-last类

Bootstrap4还提供了order-first和order-last类，用于将列置于第一或最后。例如，要将第一列置于最后的位置，我们可以使用以下代码：

<div class="container">
  <div class="row">
    <div class="col-6 order-last">第一列</div>
    <div class="col-6">第二列</div>
  </div>
</div>

在上面的代码中，我们给第一列添加了order-last类，这样就可以将其置于最后一列的位置。

使用配套的预设类

除了上述的基础类外，Bootstrap4还提供了一套方便的预设类，用于根据屏幕尺寸调整列的顺序。

.order-*类

Bootstrap4的预设类有以下几种：
– .order-first-*: 将列置于第一的位置。
– .order-last-*: 将列置于最后的位置。
– .order-middle-*: 将列置于中间的位置。
– .order-sm-*: 在小屏幕尺寸下改变列的顺序。
– .order-md-*: 在中等屏幕尺寸下改变列的顺序。
– .order-lg-*: 在大屏幕尺寸下改变列的顺序。
– .order-xl-*: 在超大屏幕尺寸下改变列的顺序。

调整列顺序的示例

下面是一个使用Bootstrap4的列排序类调整列顺序的示例：

<div class="container">
  <div class="row">
    <div class="col-md-4 order-2">第二列</div>
    <div class="col-md-4 order-3">第三列</div>
    <div class="col-md-4 order-1">第一列</div>
  </div>
</div>

在上述示例中，我们将第一列的顺序值设置为1，第二列的顺序值设置为2，第三列的顺序值设置为3。在中等屏幕尺寸下，列的顺序将会按照设置的值进行调整。

总结

通过使用Bootstrap4的列排序类，我们可以轻松地调整列在响应式布局中的顺序。我们可以利用order-*类、order-first和order-last类以及配套的预设类来实现不同屏幕尺寸下的列顺序调整。这使得我们可以更加灵活地布局网页，提升用户体验。希望本文对您理解和使用CSS调整列顺序有所帮助。