bootstrap 5 中 card 图片左右布局响应式切换需用 d-flex + flex-column（小屏）与 d-md-flex + flex-md-row（大屏）组合，配合 card-img-start 和 flex-grow-1 实现左图右文/上图下文；card-img 类无响应式变体，不可用 d-{bp}-none 隐藏图片或 float/absolute 破坏流式结构。
card里图片左右布局怎么随屏幕尺寸切换
bootstrap 5 默认的 card 不自动响应式调整图片位置，必须手动控制图片和内容的排列顺序与对齐方式。核心不是靠 card-img 类本身，而是用 flex 工具类 + 布局方向切换。
用 flex-row 和 flex-column 控制主轴方向
默认 card 是垂直堆叠（flex-column），要实现“大屏左图右文、小屏上图下文”，得把整个 card 设为 flex-row，再用响应式类在小屏切回 flex-column：
<div class="card d-flex flex-row"> @@##@@ <div class="card-body">...</div> </div>
但这样小屏时图片仍会挤在左侧。正确做法是：大屏用 flex-row，小屏强制换向：
-
d-md-flex+flex-md-row：仅在 md 及以上启用行布局 -
d-flex+flex-column：小屏默认列布局（文字在图片下方） -
card-img-start在flex-row下才生效；小屏时它无效，图片自然居顶
card-img 类不支持响应式定位，别硬套
card-img-top / card-img-bottom 是静态位置，不能根据断点切换；card-img-start 和 card-img-end 只在 flex-row 容器中起作用，且无 sm-card-img-start 这类响应式变体。常见错误是写成：
@@##@@ <!-- 错！d-md-none 会让图片在 md+ 消失 -->
应该让同一张图始终存在，只改容器布局：
- 不要给
<img src="..." class="card-img-start" alt="">加d-{breakpoint}-*显示/隐藏类 - 不要用
float或position: absolute—— 会破坏card的流式结构和间距 - 图片宽高建议设
width: 100%或用object-fit: cover配合固定height，避免拉伸
注意 card-body 的宽度和对齐
在 flex-row 下，card-body 默认会撑满剩余空间，但若内容少，可能显得松散。可加 flex-grow-1 显式声明占位：
<div class="card d-flex flex-column d-md-flex flex-md-row"> @@##@@ <div class="card-body flex-grow-1">...</div> </div>
关键细节：
-
w-md-50让图片在 md+ 占一半宽度，避免过宽或过窄 -
flex-grow-1确保文字区域撑开，尤其当图片高度固定时 - 小屏下
flex-column自动让card-body宽度恢复 100%，无需额外类 - 如果 Card 有边框或阴影，确保
overflow: hidden（默认已有），防止图片溢出圆角
最易被忽略的是：Flex 方向切换后，align-items 默认值会改变（flex-row 下是 stretch，可能导致文字区域高度被图片拉高），必要时加 align-items-md-start 控制对齐。
