order-md-last仅在≥768px时将元素设为flex排序最后（order:100），需父容器为d-flex（如.row）、子元素为.col，否则无效；小屏恢复HTML顺序，不改变焦点与读屏顺序。
order-md-last 在 Bootstrap 5 中怎么用
它不是“写法问题”，而是语义和断点配合问题：order-md-last 只在 md（≥768px）及以上生效，且只改变 flex 排序，对非 flex 容器无效。如果你加了但没效果，大概率是父容器没设 class="d-flex" 或没用 col 类触发 flex 布局。
Bootstrap 5 的栅格默认用 flex 实现，但只有当列（.col）处于 .row（本质是 d-flex）中时，order-* 才起作用。单独给一个 div 加 order-md-last 是无效的。
-
.row必须存在，且不能被其他 display 样式覆盖（比如意外加了display: block） -
.col类必须保留（哪怕只是.col），否则子元素不会参与 flex 排序 -
order-md-last等价于order: 100，仅在视口 ≥768px 时生效；小屏下恢复原始 HTML 顺序 - 如果想在移动端把某列提至最前，要用
order-first或order-0，而不是依赖-md-类
常见错误：order-md-last 没反应
典型现象：加了类，预览时位置完全没变。根本原因往往是父级没形成 flex 上下文，或列被强制换行/脱离文档流。
检查这几处：
- 父
.row是否被包裹在position: absolute、float: left或display: grid容器里？这些会破坏 flex 继承 - 该列是否同时用了
.col-12和.col-md-6？没问题；但如果写了.col-12 .col-md-6 .order-md-last却仍不生效，试试加!important临时验证——大概率是 CSS 优先级被其他样式覆盖（比如自定义 theme.css 里重写了order） - 是否误用了 Bootstrap 4 的写法？Bootstrap 4 是
order-md-last，但需配合flex-row；Bootstrap 5 已移除flex-row，直接靠.row内置d-flex
替代方案：需要更细粒度控制 order 值
order-md-last 固定为 order: 100，不够灵活。比如你想让 A 列在桌面端排第 2、B 列排第 1，就不能只靠 -last / -first。
直接用数值类更可控：
-
order-0→order: 0 -
order-md-1→ 仅 ≥768px 时order: 1 -
order-lg-3→ 仅 ≥992px 时order: 3 - 所有值都支持响应式前缀：
sm/md/lg/xl/xxl
示例：左侧内容 + 右侧边栏，在桌面端希望边栏在右，移动端希望边栏在最上面：
<div class="row"> <div class="col order-md-last">右侧边栏</div> <div class="col">主内容</div> </div>
这里 order-md-last 让边栏在桌面端排最后（即右边），小屏下按 HTML 顺序排第一（顶部）——前提是两个 col 都在同一个 row 下，且没额外干扰样式。
兼容性注意：IE 不支持 order，别指望它降级
order 是 Flexbox 属性，IE10+ 部分支持但行为不一致，IE9 及以下完全忽略。如果你的项目还要兼容 IE，order-md-last 会静默失效，页面回退到 HTML 顺序。
没有优雅降级方式，只能：
- 用
@supports (order: 1)写独立 CSS 做增强（但 Bootstrap 本身不提供） - 放弃重排，改用 JavaScript 动态移动 DOM 节点（成本高、影响 SEO 和可访问性）
- 接受 IE 用户看到的是“未重排”版本——多数业务场景已可接受
真正容易被忽略的是：order 只影响视觉顺序，不影响 tab 键焦点顺序和屏幕阅读器读取顺序。如果重排后可访问性变差，得额外加 tabindex 或 aria-order（其实没有 aria-order，得靠结构重组或 aria-hidden 配合）。
