Bootstrap列顺序在手机上不生效，是因为order-类默认移动优先，需用order-md-等带断点的类；仅对.row直接子元素.col-生效；v4/v5中order-*作用于最小屏，v3无原生支持。
Bootstrap 列顺序在手机上不生效？检查是否用了 order- 类但没配断点
bootstrap 的列排序（order-）默认是“移动优先”的，意味着你写的 order-2 会作用于所有尺寸——包括手机。如果只想在桌面改顺序、手机保持原序，必须显式叠加断点前缀，比如 order-md-2，否则手机端也会被重排，结果和预期相反。
-
order-2→ 所有设备都排第二位（含手机），不是“只在桌面生效” -
order-md-2→ ≥992px（md 及以上）才生效，手机仍按 HTML 顺序渲染 - 多个断点可共存：
order-1 order-lg-3 order-xl-2表示：手机第1位 → 大屏第3位 → 超大屏第2位 - 注意：
order-值越小越靠前，0 是最前；未设order-的元素默认为order-0
为什么加了 order-md-* 还是没变？常见结构陷阱
顺序类只对 flex 容器的直接子元素生效，而 Bootstrap 的 .row 是 flex 容器，但它的子元素必须是 .col-*。如果你把 order-md-* 加在 .col-* 的子元素（比如内部的 div）上，它完全无效——flex 排序控制的是列本身，不是列里面的内容。
- ✅ 正确：给
<div class="col-md-6 order-md-2"> 加 <code>order-md-* - ❌ 错误：给
<div class="col-md-6"><div class="order-md-2">... 加顺序类 <li>别忘了 <code>.row必须存在且包裹列——没有.row，.col-*不是 flex 项目，order-自然不触发 - 自定义 CSS 若重置了
display: flex或设置了flex-direction: column，也会让order失效 - 手机优先布局：
<div class="row flex-column flex-md-row"> <li>右侧列想手机排第一：<code><div class="col-md-6 order-md-1 order-0">（手机 <code>order-0= 第一，桌面order-md-1= 第二） - 左侧列对应写：
<div class="col-md-6 order-md-0 order-1"> <li>注意：<code>flex-column和flex-md-row是 Bootstrap 4+ 的工具类，v3 不支持，需确认版本 - v3：无原生
order，需手写@media (max-width: 767px) { .my-col { order: 2; } } - v4/v5：
order-*存在，但语义是“最小屏起效”，要限制范围必须带断点（如order-lg-*） - 若项目混用旧版 CSS 或重置了
box-sizing或flex相关属性，order可能静默失效，建议用浏览器 DevTools 检查 computedorder值是否被覆盖
想让手机竖排时“先右后左”，桌面横排“先左后右”？用 flex-column + order 组合
纯靠 order- 很难实现“方向反转”，因为横排（row）和竖排（column）的排序逻辑不同。更可靠的做法是：手机用 flex-column 让列垂直堆叠，再用 order- 控制堆叠顺序；桌面恢复 flex-row 并重置顺序。
兼容性提醒：v3 和 v4/v5 的 order 行为差异
Bootstrap 3 没有 order- 工具类，只能靠自定义 CSS 或媒体查询手动写 flex-order；而 v4/v5 基于 Flexbox，默认启用 order，但 v5 移除了 xs 断点（col-* 即原 col-xs-*），所以 order-* 在 v5 中也默认作用于最小屏，不能省略断点就指望它“只在桌面起效”。
