Bootstrap用.order-{bp}-{n}类通过flex order属性控制响应式列序，需为每列显式设置各断点值，未设则默认order:0；.order-无前缀适配所有设备，断点类仅在对应及更高断点生效。
怎么用 .order- 类控制不同屏幕下的列顺序
bootstrap 的列排序不是靠 js 或额外 css，而是直接用响应式类名控制 flex 排序属性（order）。关键在于：每个断点的 .order-{bp}-{n} 只在对应断点及以上生效，低断点不会继承高断点的 order 值——这点和 .col- 类逻辑相反，容易误判。
实操建议：
- 必须为同一行内的所有列都显式设置
.order-类，否则未设置的列默认order: 0，可能意外“插队” - 断点顺序要连贯：比如你想在手机上 A 在 B 前、平板上 B 在 A 前、桌面又切回 A 在 B 前，就得写
.order-xs-1 .order-sm-2 .order-md-1，不能只写.order-sm-2 - 数值范围建议控制在 -5 到 5 之间，避免和 Bootstrap 内置的
.order-first/.order-last冲突（它们分别对应order: -1和order: 9999）
为什么 .order-sm-2 在手机上没效果
因为 sm 断点起始宽度是 576px（Bootstrap 5），而手机竖屏通常小于这个值，此时 .order-sm-* 类根本不被应用，浏览器按源码顺序渲染——也就是你写的 HTML 里哪个 <div> 在前，它就在视觉上靠左/靠上。
<p>常见错误现象：</p>
<ul>
<li>写了 <code>.order-sm-2，但在 iPhone 上顺序没变 → 实际需要补 .order-xs-1 或 .order-1（.order- 无断点前缀时适配所有设备）
.order-md-3，结果在 iPad 横屏（≥992px）下顺序正常，但竖屏（768–992px）错乱 → 因为竖屏属于 md 断点，但你没设 .order-md-，它回落到默认 order: 0
移动端优先时，.order- 的断点怎么选
Bootstrap 5 的断点链是：xs 。如果你希望「手机竖屏 A 在前、平板横屏 B 在前、桌面恢复 A 在前」，那就得覆盖三个关键区间：≤575px（xs）、≥576px 且
<p>参数差异示例：</p>
<pre class="brush:php;toolbar:false;"><div class="row">
<div class="col-12 col-sm-6 order-xs-2 order-sm-1 order-md-2">A</div>
<div class="col-12 col-sm-6 order-xs-1 order-sm-2 order-md-1">B</div>
</div></pre>
<p>说明：A 在 xs 下排第 2、sm 下排第 1、md 下排第 2；B 正好相反。这样就能实现三段式切换。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<h3>容易被忽略的兼容性细节</h3>
<p>旧版 Bootstrap（v4）和 v5 的 <code>.order- 行为一致，但 v3 不支持该类——如果你还在用 v3，得手动加 CSS：style="order: 2;" 或自定义媒体查询。另外，IE11 虽支持 flex order，但不支持响应式类名中的断点解析，所以 .order-sm-2 在 IE11 下完全无效，只能降级为全屏统一顺序。
性能影响几乎为零，因为只是修改了 flex 容器子项的 order 值，不触发重排（reflow），只影响重绘（repaint）。
最常漏掉的一点：很多人以为改了 .order- 就能解决 SEO 内容顺序问题，其实搜索引擎仍按 HTML 源码顺序抓取——.order- 只改变视觉流，不改变 DOM 树结构。真要优化 SEO，得配合语义化标签和 aria-order 等辅助手段。
