Bootstrap的order-类仅对.row直接子元素（即.col-*）生效，依赖Flex布局；若失效，常见原因包括目标元素非直系子元素、.row被覆盖为非flex显示、子元素脱离文档流、未正确设置响应式断点或忽略DOM顺序对SEO/无障碍的影响。
order-类只对.row直接子元素生效
加了order-md-1但没反应，大概率是目标元素没在.row直系下。Bootstrap的order-类依赖Flex布局，而只有.row（默认display: flex）的直接子元素——也就是.col-*——才受控制。给.col-6 > div加order-2完全无效，它不是Flex项目。
常见踩坑点：
-
.row被自定义CSS覆盖成display: block或display: grid，导致Flex上下文丢失 - 列嵌套时，在内层
.row里给.col-*加order-是对的，但外层.row里的order-不影响内层 - 用了
float、position: absolute等脱离文档流的方式，会绕过Flex排序逻辑
响应式order必须显式写全断点
order-md-2只在中屏及以上生效，小屏（xs）会回退到HTML源顺序，不会继承或向下兼容。想实现「手机A→B→C、平板B→A→C、桌面A→B→C」，不能只写order-md-1，得补全：
<div class="row"> <div class="col order-1 order-md-2 order-lg-1">A</div> <div class="col order-2 order-md-1 order-lg-2">B</div> <div class="col order-3">C</div> </div>
注意：order-不带断点前缀（如order-1）是全局生效，和响应式类混用容易冲突；所有同级列最好都设值，否则未设的默认order: 0，可能插到你预期之外的位置。
立即学习“前端免费学习笔记（深入）”；
order只改视觉顺序，不改DOM结构
order本质是CSS order属性，纯视觉重排。它不影响：
- HTML源码顺序（SEO抓取、初始渲染顺序）
- 键盘
Tab键焦点流（可访问性失效） - 屏幕阅读器读取顺序（辅助技术仍按DOM顺序播报）
所以关键内容（比如主标题、CTA按钮、正文段落）必须靠HTML本身位置保证优先级。如果SEO或无障碍是刚需，别指望order-“救场”，该调整HTML结构就调整。
别再用pull/push，它们在Bootstrap 4+已彻底失效
col-md-push-3、col-sm-pull-6这类类名在Bootstrap 4及之后版本中已被移除，写了也不生效，浏览器也不会报错——这是最隐蔽的兼容性陷阱。所有新项目必须用order-替代，旧项目升级时要批量替换。
数值建议控制在-5到5之间，避开order-first（order: -1）和order-last（order: 13）的默认值冲突，也方便后期维护。调试时直接看DevTools里的Computed → order值，比猜类名更准。
