用 d-flex + flex-column-reverse/flex-md-row 替代 row/col 实现图文响应式布局，更轻量可控；需加 img-fluid 保证图片自适应，避免 float 破坏 flex 流。
直接用 d-flex + flex-column / flex-md-row 组合，配合 order- 类控制图文顺序，比套用 row/col 更可控、更轻量、更少嵌套——尤其当你只需要两块内容（图+文）时，硬套网格反而容易出错。
用 d-flex 替代 row 启动弹性容器
Bootstrap 的 .row 虽然默认是 display: flex，但它自带负外边距（margin: 0 -15px）和清除浮动逻辑，对纯图文混排属于冗余。而 d-flex 是干净的 flex 容器，无副作用。
- ✅ 正确写法：
<div class="d-flex flex-column-reverse flex-md-row"> <li>❌ 避免嵌套：<code><div class="row"><div class="col">...</div></div>—— 多一层 wrapper 就多一层 margin/padding 干扰 - ⚠️ 注意：必须给父容器设高度（如
min-height: 300px）或内容撑开，否则flex-column下的子项可能塌缩 - 默认（xs/sm）：
flex-column-reverse让后写的元素（通常是文字）渲染在前，但视觉上被“压”到下方；图片自然浮到顶部 - 中屏起（md+）：
flex-md-row生效，覆盖flex-column-reverse，恢复水平排列 - ⚠️ 关键点：两个子区块必须都加
col-md-6（或flex-md-0+ 宽度控制），否则桌面端不会等宽；移动端下col-md-6会被忽略，自动转为flex: 1 - 图片对齐：加
align-self-center或align-self-end单独控制其在交叉轴的位置（比如让图片底部贴齐文字基线） - 文字对齐：用
text-start/text-center控制段内文本，别用justify-content拉整个 flex item - ⚠️ 常见坑：
align-items-center作用于容器，会让所有子项垂直居中——若图文高度差异大，文字会被“吊”在半空，看起来像没对齐 - ✅ 必加：
<img src="..." class="img-fluid rounded shadow-sm"> - ❌ 错误组合：
float-start img-fluid——float会让元素脱离 flex 流，order和align-self全部失效 - ? 提示：如果图需要固定比例（如 4:3），可额外加
style="aspect-ratio: 4/3;"，现代浏览器支持良好
flex-column-reverse + flex-md-row 实现移动端图在上、桌面端图在右
这是最简洁的响应式图文顺序切换方案，不依赖 order- 类，也不需要调整 HTML 顺序。
图文宽度与对齐要分开控制
很多人试图用 justify-content-center 居中整行，结果图文一起偏移——其实图和文的对齐需求往往不同。
图片自适应与圆角/阴影别漏掉 img-fluid
img-fluid 不只是让图片响应式，它还设置了 max-width: 100% 和 height: auto，防止拉伸变形。单独加 width: 100% 会丢掉后者。
真正难的不是写对类名，而是理解哪些类该用、哪些该删——比如 row 和 col 是为多列栅格设计的，而单图文混排本质是双项目 flex 排列，强行套网格只会引入 margin、padding、断点继承等隐性约束。删掉多余 wrapper，从 d-flex 开始，问题就清晰了。
