CSS 在 Bootstrap 4中使用push/pull和col-md-12进行列排序

在本文中，我们将介绍在 Bootstrap 4 中使用 push/pull 和 col-md-12 进行列排序的方法。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是列排序？

在网页设计中，常常需要对网页中的各个列进行排序。列排序是指根据需要，改变列的排列顺序，以达到更好的布局和展示效果。在 Bootstrap 4 中，我们可以使用 push/pull 和 col-md-12 这两种技术来实现列排序。

使用 push/pull 进行列排序

push 和 pull 是两个 Bootstrap 4 中的 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 类，可以用于改变列的位置。通过在列的 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 类中添加 push-* 或 pull-* 类，我们可以将列移动到其他位置。其中 * 表示移动的具体位置。下面是一个例子：

<div class="container">
  <div class="row">
    <div class="col-md-4 push-md-8">
      这是第一列
    </div>
    <div class="col-md-8 pull-md-4">
      这是第二列
    </div>
  </div>
</div>

在上面的例子中，第一列使用了 col-md-4 push-md-8 类，表示将该列从原来的位置移动到右边两列的后面。而第二列使用了 col-md-8 pull-md-4 类，表示将该列从原来的位置移动到左边两列的前面。

使用 col-md-12 进行列排序

col-md-12 是 Bootstrap 4 中的一个 CSS 类，用于将列扩展为占据整行的宽度。通过使用 col-md-12 类，我们可以实现将某一列移动到整行的开头或结尾。下面是一个例子：

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-push-8">
      这是第一列
    </div>
    <div class="col-md-8 col-md-pull-4">
      这是第二列
    </div>
    <div class="col-md-12">
      这是第三列，占据整行的宽度
    </div>
  </div>
</div>

在上面的例子中，通过在第一列和第二列的 CSS 类中添加 col-md-push-8 和 col-md-pull-4 类，分别将这两列移动到整行的后面和前面。而第三列使用了 col-md-12 类，表示该列将占据整行的宽度。

示例说明

为了更好地理解列排序在 Bootstrap 4 中的应用，我们来看一个实际的例子。假设我们有一个页面，包含三列内容。默认情况下，这三列的顺序是按照它们在 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML 中的位置排列的。

<div class="container">
  <div class="row">
    <div class="col-md-4">
      这是第一列
    </div>
    <div class="col-md-4">
      这是第二列
    </div>
    <div class="col-md-4">
      这是第三列
    </div>
  </div>
</div>

现在，我们希望将第三列移动到第一列之前，同时将第一列移动到第二列之后。我们可以通过添加 push/pull 和 col-md-12 类来实现这一效果。

<div class="container">
  <div class="row">
    <div class="col-md-4 push-md-4">
      这是第三列（原来的第一列）
    </div>
    <div class="col-md-12">
      这是第一列（原来的第三列）
    </div>
    <div class="col-md-4 pull-md-4">
      这是第二列
    </div>
  </div>
</div>

在上面的例子中，我们使用 push-md-4 将第三列移动到第一列之前，使用 pull-md-4 将第一列移动到第二列之后。同时，使用 col-md-12 将第一列扩展为占据整行的宽度。

通过这样的列排序，我们可以灵活地调整布局，使得网页的展示效果更加符合需求。