Bootstrap 4+ 移除了 col--push/pull 类，因改用 Flexbox 布局，排序须用 order- 类（如 order-md-2），且仅在 flex 容器内生效，不影响 DOM 顺序与无障碍访问。
Bootstrap 4+ 的 col-*-push 和 col-*-pull 类完全不生效，不是你写错了，是它们被框架主动移除了——底层已切换为 Flexbox 布局，order 属性才是唯一有效的列排序机制。
为什么 push/pull 在 Bootstrap 4+ 里彻底失效
旧版 Bootstrap 3 用 float + left/right 模拟列位移，push/pull 本质是 hack 式偏移；而 Bootstrap 4 起全面采用 Flexbox，row 变成 display: flex 容器，排序逻辑必须走标准的 order CSS 属性。框架不再解析任何 col-md-push-3 这类类名，连 warning 都不抛——静默忽略。
- 检查控制台不会报错，但元素样式里根本看不到
left或margin-left生效 - 即使你保留了 Bootstrap 3 的 CDN，只要混用 Bootstrap 4+ 的 CSS 文件，push/pull 就会断掉
- 常见误判：以为是 class 拼写错误（比如
col-md-pull-2写成col-md-pull2），其实拼对了也没用
order- 类怎么写才真正起作用
order- 必须配合断点前缀使用，且只影响视觉顺序，不改变 DOM 结构和 tab 键序。默认所有列 order: 0，所以 order-0 不必写。
-
order-1全局生效（不推荐，破坏响应式意图） -
order-md-2表示「中屏及以上时，该列排在第 2 位」（数值越小越靠前） -
order-lg-0 order-md-12是合法组合：大屏回退到默认位置，中屏强制排到最后 - 如果只设
order-md-3，小屏（xs/sm）下会按 HTML 源顺序渲染——这点极易被忽略，导致移动端布局错乱
order 值填多少才合理
Flexbox 的 order 是整数，无单位，也不绑定栅格列数。Bootstrap 提供的 order-0 到 order-12 只是便利范围，实际支持负数（如 order--1）和超大值（如 order-99）。
- 别硬套“12 列系统”去想 order 值：它和列宽无关，只决定 flex 子项排列优先级
- 两列交换顺序，最简写法是
order-1+order-0（或不写后者） - 三列重排（如 A→B→C → B→C→A），可设
order-0、order-1、order-2，而非试图用 offset 或 margin 模拟 - 慎用负值：虽然合法，但可能让语义顺序和屏幕阅读器顺序严重脱节
为什么 order 不影响 tab 键顺序和语义结构
Flexbox 的 order 属性仅改变视觉渲染流，DOM 树、tabindex 流、屏幕阅读器遍历顺序全部维持原始 HTML 顺序。这是有意设计，不是 bug。
- 如果你把操作按钮用
order-md-0提到最左，但 HTML 里它在表单末尾，键盘用户仍需 tab 到最后才能触发它 - SEO 和无障碍测试工具（如 axe）会警告这种“视觉与语义不一致”
- 真要改交互顺序，应调整 HTML 源码位置，或用
tabindex显式控制——order-不负责这件事
最容易被忽略的一点：order 类只在 row 是 flex 容器时才起作用，而 row 必须直接嵌套在 container 或 container-fluid 内。如果中间插了普通 div，flex 上下文就断了，order- 会完全失效——查 layout 问题时，先看三层嵌套是否完整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
