d-flex + flex-column-reverse 是 bootstrap 5 实现移动端图片在文字上方的最简方案：html 中文字在前、图片在后，css 倒序渲染；需移除 .row，确保图片和文字为 d-flex 直系子元素；中屏起用 flex-md-row + col-md-6 恢复左右并排。
用 d-flex + flex-column-reverse 控制默认顺序
移动端图片必须出现在文字上方，不能靠 JavaScript 或媒体查询硬切 DOM。Bootstrap 5 的 d-flex 和 flex-column-reverse 是最直接可靠的解法——它让容器变成 Flex，并把子元素在垂直方向上倒序渲染。
关键点在于：HTML 里文字区块写在前、图片区块写在后，但加了 flex-column-reverse 后，后写的 反而先显示。这样既保持语义（内容流仍是“文字→图片”），又达成视觉“图片→文字”的移动端效果。
- 必须移除外层
.row，否则.col在非 Flex 容器中会退化为普通块级元素，flex-column-reverse失效 -
flex-column-reverse默认生效于所有断点；若只想在 xs/sm 生效，改用flex-sm-column-reverse - 图片和文字区块都需是
d-flex容器的**直系子元素**，嵌套一层div就会断掉 order 行为
桌面端恢复左右并排：flex-md-row + col-md-6
中屏及以上（≥768px）要切换为左右布局，不是靠覆盖 order 值，而是用 flex-md-row 覆盖掉之前的 column 方向。此时 col-md-6 才真正起作用——它会让两个子区块各占 50% 宽度，且自动等高。
注意：col-md-6 在移动端（
- 别混用
order-md-*和flex-md-row：前者只在 Flex 容器中有效，但优先级低于方向类，容易互相干扰 - 如果图片高度不固定，加
align-items: stretch（Bootstrap 中对应align-items-stretch）可防止文字区块被压扁 - 避免给文字区块设固定
height，否则响应式缩放时内容溢出或留白
图片和文字区块的尺寸与对齐控制
左右并排时，图片常因比例失衡撑开容器，或文字区块高度塌陷。Bootstrap 5 提供的 h-100、object-fit: cover 和 align-self-center 是关键组合。
- 图片加
h-100 w-100+object-fit: cover（需额外 CSS 或内联 style），确保填满高度且不拉伸 - 文字区块加
align-self-center可垂直居中对齐图片（仅在 flex-row 下生效） - 若想图片在桌面端右对齐、文字左对齐，不用
text-end，而是给图片区块加ms-auto（margin-start auto） - 移动端图片顶部留白太多？删掉
mt-5这类全局间距类，改用mb-4控制图片区块底部间距更可控
为什么 order-* 类经常失效
你试过 order-sm-0 和 order-sm-1 却没反应，大概率不是写错类名，而是父容器没触发 Flex 渲染流。Bootstrap 的 .row 虽默认 display: flex，但一旦外层有 overflow: hidden、position: relative 或嵌套了 .container-fluid，就可能破坏子项的 Flex 上下文。
-
order-*只对 Flex 容器的**直系子元素**生效；.col里面再套.col，第二层就完全不受控 - 检查浏览器开发者工具中，目标元素 computed 样式里是否有
order: 0；如果没有，说明类根本没被应用或被更高优先级规则覆盖 - 加载顺序问题：如果 Bootstrap CSS 在自定义 CSS 之后引入，而后者写了
* { order: 0 !important }，那所有order-*都会失效
真正稳定的方案不是堆砌 order 值，而是用容器级 Flex 方向切换——它不依赖子元素数量、不care HTML 书写顺序是否“正确”，只要结构扁平、类名到位，就能跨设备一致生效。最易忽略的是：忘记移除冗余的 .row 和过度嵌套的 .col，它们看似无害，实则悄悄关掉了 Flex 的门。
