在Bootstrap中，列排序（Column Ordering）是一种布局技术，允许我们在不同屏幕尺寸下重新排列列的顺序。这对于在响应式设计中调整布局非常有用。
列排序类
Bootstrap提供了一组列排序类，用于控制列在不同屏幕尺寸下的顺序。以下是常用的列排序类：
.order-{breakpoint}-{number}: 在指定断点（breakpoint）处，将列的顺序设置为指定的数字（number）。
其中，breakpoint可以是以下断点之一：
xs：超小屏幕（Extra Small），通常是移动设备上的横向布局。sm：小屏幕（Small），通常是平板电脑上的纵向布局。md：中等屏幕（Medium），通常是小型笔记本电脑和台式机上的布局。lg：大屏幕（Large），通常是较大的笔记本电脑和台式机上的布局。xl：超大屏幕（Extra Large），通常是更大的显示器上的布局。
示例
下面是一个示例，演示如何使用列排序类在不同屏幕尺寸下重新排列列的顺序：
代码语言：javascript复制<div class="container">
<div class="row">
<div class="col-md-4 order-2 order-md-1">
<div class="card">
<div class="card-body">
<h5 class="card-title">列1</h5>
<p class="card-text">这是列1的内容。</p>
</div>
</div>
</div>
<div class="col-md-4 order-1 order-md-2">
<div class="card">
<div class="card-body">
<h5 class="card-title">列2</h5>
<p class="card-text">这是列2的内容。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">列3</h5>
<p class="card-text">这是列3的内容。</p>
</div>
</div>
</div>
</div>
</div>在上述示例中，我们创建了一个容器（.container），其中包含一个行（.row）。行中包含了三个列（.col-md-4）。
- 列1的顺序在中等屏幕（md）上为2，小于中等屏幕（md）时为1（
order-2 order-md-1）。 - 列2的顺序在中等屏幕（md）上为1，小于中等屏幕（md）时为2 （
order-1 order-md-2）。 - 列3保持默认顺序，不设置任何列排序类。
在默认情况下，列按照它们在HTML中的顺序排列。通过使用列排序类，我们可以在不同屏幕尺寸下重新排列列的顺序，以满足特定的布局需求。
在上述示例中，当屏幕尺寸大于中等屏幕时，列1和列2的顺序发生了变化，列1在列2之前显示。而在中等屏幕及以下的屏幕尺寸中，列2在列1之前显示。
通过使用列排序类，我们可以轻松地重新排列和调整布局中的列的顺序，以适应不同的屏幕尺寸和设计需求。
