order-md-1在手机上无效，因bootstrap响应式类仅向上生效（md断点≥768px），手机xs断点（≤575px）不匹配该类，元素回退默认order: 0；需显式添加order-1（覆盖xs）并确保父容器为.row（display: flex）且目标为直接子元素。
order-md-1在手机上没反应，是因为断点根本没匹配
Bootstrap的order-md-*类只在≥768px（md断点起始）生效，而手机竖屏通常≤575px（xs），此时类名压根不被浏览器解析，元素回退到默认order: 0，按HTML源码顺序渲染。这不是bug，是响应式类“向上生效、不向下继承”的设计逻辑。
常见误操作：order-md-1单独写，指望小屏也生效；或者混用order-2 order-md-1——小屏仍按order: 2排，和预期相反。
- 想让手机也排序，必须显式加
order-1（适配所有设备）或order-xs-1（但注意：Bootstrap 5已移除order-xs-*，order-*无前缀即覆盖xs） - 要实现“手机A在前、平板B在前、桌面A在前”，就得写全：
order-1 order-sm-2 order-md-1，缺一不可 - 检查当前视口宽度是否真到了md断点：用浏览器devtools切设备尺寸，别凭感觉判断
父容器不是.row，order类完全无效
order-*依赖Flex布局，而Bootstrap中只有.row自带display: flex。如果直接把.col-*塞进.container或普通<div>里，<code>order属性不会触发任何效果——它不是CSS通用属性，只在Flex容器下有意义。
- 确保目标元素是
.row的**直接子元素**；嵌套在.col里的内容再加order-*，无效 - 别用
.row套.row再加order：内层.row仍是Flex容器，但它的子元素（即你写的.col）已脱离外层.row的Flex上下文，order值只在内层生效，无法跨行调度 - 调试时看Computed Styles：确认父元素display确实是flex，且目标元素的order值已生效，而不是被
!important或内联style覆盖
order只改视觉顺序，不碰DOM和可访问性
这是最容易被忽略的深层限制。order-*只是让浏览器在Flex主轴上按数值重绘元素位置，HTML源码、屏幕阅读器读取流、键盘Tab顺序、SEO爬虫看到的结构，全部保持原始顺序不变。
- 把导航写在正文后面，再用
order-md-1推到左边，对SEO有利——爬虫仍先抓到正文 - 但屏幕阅读器用户会按源码顺序听到导航→正文，而视觉上却是正文→导航，存在语义错位
- 若需同步调整Tab顺序，得额外加
tabindex="-1"或用JS动态控制tabindex属性，不能只靠CSS - 不要指望
order解决“某列在小屏跳到顶部、中屏居中、大屏固定右侧”这种多级定位需求——它只做相对排序，不是绝对定位；真要稳定实现，该重构HTML结构，而非堆砌order类
断点类组合时数值差值比绝对值更重要
order值本身没有绝对意义，只表达同一Flex容器内元素间的相对先后。比如order-5和order-10的效果，等同于order-0和order-5，只要差值一致，顺序就不变。
- 避免用过大数值（如
order-100）：虽合法，但易与order-first（order: -1）或order-last（order: 9999）冲突，维护困难 - 同一行内所有列都应显式设置
order-*：未设的列默认order: 0，可能意外插队到最前 - 慎用
order-first/order-last和数值类混搭：CSS优先级相同，后声明者胜出，容易踩坑 - 调试建议：用devtools直接看Computed面板里的
order值，比猜类名更可靠；尤其注意不同断点切换时，该值是否按预期变化
