Bootstrap无一键响应式图片布局类，img-fluid仅实现单图缩放；图文顺序切换需d-flex+flex-column-reverse，背景图适配须手写CSS媒体查询，四图网格应使用col-12 col-sm-6 col-md-4 col-xl-3组合并配合h-100。
Bootstrap 本身不提供“响应式图片布局”的一键类，img-fluid 只解决单张图的缩放，而图文顺序切换、背景图适配、多图网格排列等，必须靠组合工具类或补充 CSS 才能落地。
img-fluid 只管缩放，不管位置和顺序
img-fluid 的作用非常明确：给 <img> 加上 max-width: 100% 和 height: auto，防止溢出容器。但它对以下问题完全无效：
- 移动端图片要显示在文字上方，桌面端却要并排——
img-fluid不参与排序 - 图片作为背景图嵌入容器——
img-fluid只作用于<img>标签，对background-image零影响 - 多张卡片图片高度不一致导致网格错位——
img-fluid不控制父容器高度
常见错误是给图片加了 img-fluid 还以为“响应式完成了”，结果在手机上文字被挤到图下方、桌面端图和文字堆成一列。
移动端图片置顶 + 桌面端并排：用 d-flex + flex-column-reverse
这是目前最稳定、最少嵌套、不依赖 order-* 的方案。核心是放弃 .row/.col 套路，直接用 Flex 容器控制整体流向：
立即学习“前端免费学习笔记（深入）”；
- 外层容器加
d-flex flex-column-reverse flex-md-row：默认竖向反排（图片区块写在 HTML 后面，但视觉在上），≥768px 时切为水平排列 - 两个子区块统一用
col-md-6：桌面端各占半宽；移动端因flex-column生效，col-*自动转为flex: 1，等高自适应 - 删掉所有
float-start、float-end：它们会让元素脱离 Flex 流，直接让order或flex-*失效
示例结构（文字区块写在前，图片区块写在后）：
<div class="d-flex flex-column-reverse flex-md-row"> <div class="col-md-6"><h3>文字内容</h3><p>说明文本...</p></div> <div class="col-md-6"><img src="pic.jpg" class="img-fluid rounded"></div> </div>
带背景图的响应式容器：必须手写 CSS + 媒体查询
Bootstrap 5 官方 CSS 中不存在 bg-image、backgroundimage 或任何背景图类。你看到的都是自定义代码。
- 不能指望
srcset控制 CSS 背景图——它只对<img>有效 - 必须显式写
min-height: 100vh或固定高度，否则容器高度为 0，图根本不会渲染 - 每个断点换一张图源，避免手机加载桌面大图：
@media (min-width: 768px)覆盖background-image -
background-position不响应式，需按断点重设，比如手机用center top防止人脸被裁，桌面用center center
典型写法：
.hero-bg {
background-image: url('bg-mobile.jpg');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
min-height: 100vh;
}
@media (min-width: 768px) {
.hero-bg {
background-image: url('bg-tablet.jpg');
background-position: center center;
}
}
@media (min-width: 992px) {
.hero-bg {
background-image: url('bg-desktop.jpg');
}
}四图网格：别用 flex 写，用 col-* 断点组合
想实现“大屏 4 列、平板 2 列、手机 1 列”，最简方式是让每张图独立包裹在 .col-* 里，由 Bootstrap 栅格自动换行：
-
col-12 col-sm-6 col-md-4 col-xl-3是经典组合：手机全宽、小平板两列、中平板三列、大桌面四列 - 务必给卡片加
h-100，否则图片高度不一会导致行高塌陷、网格错位 - 删掉所有手动写的
display: flex、flex-basis或width: calc(...)—— 它们会覆盖栅格的 margin/padding 规则，引发间隙错乱 - 用
m-1 m-md-2控制外边距，比写margin-bottom: 1rem更可靠
关键不是“怎么让图变小”，而是“怎么让容器按断点分栏并保持视觉对齐”。这点容易被忽略：图再响应，容器没对齐，整个布局就松散了。
