移动端order-md-无效，因手机属xs断点（≤575px），而order-md-2仅在≥768px生效；需用order-（全局）或order-sm-*（≥576px）控制小屏顺序。
移动端没生效，大概率是用了 order-md-* 却忘了手机属于 xs 断点
Bootstrap 的 order-* 类默认“移动优先”，但关键在断点匹配逻辑：你写的 order-md-2 只在 ≥768px（中屏及以上）生效，手机宽度通常 ≤575px（xs），此时该类压根不加载，浏览器直接回退到默认 order: 0。结果就是——你盯着手机看半天，顺序纹丝不动。
常见误操作是照着 PC 端效果写完 order-md-1 就收工，却漏了 xs 和 sm 断点的显式声明。比如想让导航列在桌面左、手机下，只加 order-md-1 给导航列，手机端它仍是 order: 0，而正文列也默认 order: 0，最终按 HTML 源顺序渲染，导航反而跑到上面去了。
- 检查当前视口宽度是否真匹配目标断点（用浏览器 DevTools 切换设备模拟器，别只靠肉眼估）
- 想控制手机端顺序，必须用无前缀的
order-*（如order-2）或order-sm-*（sm 断点从 576px 起） -
order-*和order-md-*可共存，但需明确各自作用域：小屏用前者，中屏起用后者覆盖
order-* 加对了位置，但父容器不是 flex 容器
order 是 Flexbox 属性，只在 display: flex 或 display: grid 的父容器下起效。Bootstrap 的 .row 默认是 flex 容器，但前提是它没被其他样式覆盖，且你的列元素必须是它的**直接子元素**。
典型失效场景：<div class="col"><div class="order-md-1">内容</div></div>——这里 order-md-1 加在嵌套 div 上，而 .row 的直接子元素是 .col，Flex 排序根本不认这个内层 div。
- 确认 DOM 结构：
<div class="row"><div class="col order-md-1">✓</div></div>，不是跳过.row或套多一层容器 - 用 DevTools 查看目标元素的 Computed 面板，确认
display是flex，且order值已计算为你设的数字（比如2），不是0 - 避免和
float、position: absolute或自定义display: block混用，它们会让元素脱离文档流，order失效
Bootstrap 4 里写了 order-first，但完全没反应
order-first 和 order-last 是 Bootstrap 5.3+ 新增的简写类，编译为 order: -1 和 order: 13。Bootstrap 4 根本没有定义这两个类名，浏览器会直接忽略——既不是合法 CSS 值，也不是框架预设类，DevTools 里连样式规则都找不到。
如果你在 v4 项目里抄了新文档的写法，刷新十次也没用。这不是缓存问题，是类名根本不存在。
- Bootstrap 4 正确写法只有
order-0到order-12，以及带断点的order-md-1等 - 想实现“最前”，用
order-0或order--1（负数需双短横）；“最后”用order-12或更大的正数（如order-99） - 升级前别混用：v4 项目里出现
order-first，CSS 文件不会报错，但样式不会注入，调试时查不到对应规则
视觉顺序变了，但键盘 tab 和屏幕阅读器还是按 HTML 顺序走
order 只改视觉渲染流，DOM 结构、源码顺序、tab 键焦点流、屏幕阅读器读取顺序全部维持原样。这是 Flexbox 规范的设计，不是 bug。
比如你把侧边栏用 order-md-1 提到桌面端最左，但 HTML 里它写在正文后面，键盘用户 tab 时仍会先遍历正文，再跳到侧边栏；屏幕阅读器也会按源码顺序播报，导致语义断裂。
- SEO 和无障碍要求 HTML 源顺序合理：重要内容优先写，导航/广告后置
- 如果必须视觉前置但语义后置，需额外用
tabindex或 ARIA 属性补救（如aria-labelledby），不能只依赖order - 测试时别只看页面长什么样，用键盘 tab 试一遍焦点流，用屏幕阅读器听一遍播报顺序
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
