order-first 优先级最高，order-last 次之，均高于所有数字类 order（如 order-0 至 order-5）；渲染顺序为：order-first → order-last → 未设 order 的默认项 → order-0 → order-1 → … → order-5。
order-first 和 order-last 的优先级怎么算
它们不是“并列最高”，而是 order-first 优先级高于 order-last，且都高于所有数字类（如 order-1 到 order-5）。当多个元素同时存在时，渲染顺序是：order-first → order-last → 未设 order 的默认顺序 → order-1 → order-2 → … → order-5。
注意：Bootstrap 5 中 order 数字只支持 0–5，order-6 及以上会被忽略，等同于不写；order-0 是合法的，它比默认顺序更靠前（但仍在 order-first 之后）。
-
order-first元素会排在整行最左（LTR 布局下），哪怕它在 HTML 中写在最后 -
order-last元素紧挨着order-first之后、其他元素之前，但不会“挤到最右”——它只是排序意义上的“末尾”，视觉位置仍由列宽和栅格流决定 - 如果两个元素都加了
order-first，则按 HTML 源码顺序排列（即先写的在前）
为什么加了 order-first 却没生效
常见原因是没把所有相关 .col 都显式设置排序类。Bootstrap 的 Flex 排序依赖所有子项参与 flex-order 计算，如果部分列没设 order，它们会按文档流默认顺序插入，可能“插队”到 order-first 元素中间。
比如三列布局中只给中间列加 order-first，左右列没设任何 order 类，结果往往是：左列 → 中列（order-first）→ 右列，而非预期的中列 → 左列 → 右列。
- 必须为同一
.row下所有.col显式指定order-类（哪怕只是order-0或order-2） - 检查是否漏写了
.row—— 没有父级.row（display: flex）容器，order类完全无效 - 确认没被其他 CSS 覆盖，例如自定义样式里写了
order: unset !important
order-first / order-last 和响应式 order 类能混用吗
可以，但要注意断点覆盖逻辑。Bootstrap 的响应式 order 类（如 order-md-first、order-lg-3）会在对应断点及以上生效，并覆盖更小断点的设置。
例如：order-first order-md-2 order-lg-last 表示：xs 下最前，md 下排第二，lg+ 下变成“排序末尾”。这种叠加是安全的，但容易误判最终行为。
- 断点类名优先级高于无断点类名，
order-md-first在 ≥md 时会覆盖order-first - 不要混用冲突语义，比如
order-first order-lg-first是冗余的；而order-first order-md-last在 md 断点会突然跳到末尾，可能造成布局断裂 - 移动端 SEO 场景下，常需
order-first（让重要内容提前）+order-md-0（桌面端回归自然顺序），这是合理用法
order-last 不等于“右对齐”或“推到最后一个格子”
order-last 只影响 Flex 子项的排列顺序，不改变列本身的宽度、浮动或对齐方式。它不会让元素贴右、居右，也不会自动填补前面空出的栅格位置。
如果你想要“右侧固定栏”，应该用 .ms-auto（margin-start auto）推到行末；如果想让某列“占满剩余空间”，要用 .col 不设宽度 + .col-auto 配合；order-last 只管“谁先渲染”，不管“谁占哪块地方”。
- 错误认知：给
.col-4加order-last就能把它“甩到最右边”——实际它还是从左起第 4 格宽的位置开始，只是排序上排在最后 - 真正需要右置时，优先考虑
ms-auto或justify-content-end在.row上 -
order-last最适合语义换序场景，比如 HTML 源码把广告放在前面，但视觉上要压在内容下方
