本文详解如何利用 Bootstrap 5 内置的 Flex 工具类（如 flex-column-reverse 和响应式断点类）优雅实现“移动端图片在上、文字在下，桌面端左右并排”的布局切换，无需自定义 CSS 或媒体查询，兼顾语义性、可维护性与跨浏览器兼容性。
本文详解如何利用 bootstrap 5 内置的 flex 工具类（如 `flex-column-reverse` 和响应式断点类）优雅实现“移动端图片在上、文字在下，桌面端左右并排”的布局切换，无需自定义 css 或媒体查询，兼顾语义性、可维护性与跨浏览器兼容性。
在响应式网页开发中，内容模块的视觉顺序常需随设备尺寸动态调整——例如产品介绍页在手机端更宜将图片置于文字上方（提升首屏信息密度与加载感知），而在桌面端则采用图文并列的宽屏布局。Bootstrap 5 提供了一套强大且语义清晰的 Flex 实用工具类，完全取代了传统依赖 order-* 类或手写媒体查询的繁琐方案。
核心思路是：以 Flex 布局为基底，通过方向（column/row）与顺序（reverse）的组合控制流式排列。具体实现如下：
- 使用 d-flex 启用 Flex 容器；
- 默认（移动端）设为 flex-column-reverse：使子元素垂直堆叠，且顺序反转（即后写的 <img> 元素实际渲染在前）；
- 在中等屏幕及以上（≥576px），应用 flex-md-row：切换为水平排列，同时自动取消 reverse 行为（Flex 的 row 方向不继承 reverse 效果），自然恢复 HTML 源码顺序；
- 配合 col-md-6 等栅格类，确保桌面端两列均分宽度，保持视觉平衡。
以下是完整、可直接复用的代码示例：
<section>
<div class="container text-left mt-5">
<div class="d-flex flex-column-reverse flex-md-row">
<!-- 文字内容区块（移动端显示在下方，桌面端左半区） -->
<div class="col-md-6">
<h3 class="display-3 text-start" id="long">CCTV Services</h3>
<p>
<b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring...
</p>
<div class="d-grid gap-2 col-6 mx-auto mb-4">
<button class="btn btn-primary" type="button">Submit a Ticket</button>
</div>
</div>
<!-- 图片区块（移动端显示在上方，桌面端右半区） -->
<div class="col-md-6">
<img src="https://picsum.photos/seed/picsum/300/300"
class="img-fluid rounded mb-3"
alt="IT technician working">
</div>
</div>
</div>
</section>✅ 关键优势说明：
- 零自定义 CSS：全程使用 Bootstrap 5 官方工具类，避免样式冲突与维护负担；
- 语义与可访问性友好：HTML 源码顺序仍为“文字→图片”，符合内容逻辑优先原则，屏幕阅读器按源码流读取，无障碍体验不受影响；
- 断点精准可控：md 断点（≥576px）覆盖主流平板与桌面设备，如需更早切换（如 ≥480px），可改用 flex-sm-row；
- 栅格兼容性强：col-md-6 可替换为 col-lg-4 等任意栅格类，灵活适配多列布局需求。
⚠️ 注意事项：
- 切勿在 Flex 容器内混用 row/col 类（如原问题中的 class="row" + class="col-md"），二者机制冲突会导致布局异常；
- float-start/float-end 在 Flex 容器中无效，应移除（示例中已删除）；
- 若需在超小屏（xs）强制某元素居中，可叠加 text-center 或 mx-auto，但避免对 Flex 子项使用 margin: auto 以外的定位类。
掌握这一模式后，你可轻松扩展至三栏切换、卡片排序、导航折叠等场景——本质都是对 flex-direction、flex-wrap 与响应式修饰符的组合运用。Bootstrap 5 的 Flex 工具链，正是现代响应式布局的简洁答案。
