Bootstrap Grid响应式布局求助：移动端布局调整需求

我正在使用Bootstrap Grid

当前桌面端布局：

期望移动端布局：

尝试多种方法仍无法实现，需要用Bootstrap Grid完成该响应式效果。

利用Bootstrap栅格系统的响应式排序类（order-*）和列宽度类即可实现，核心是通过order-md-*控制中等屏幕（桌面）的列顺序，移动端则按HTML结构自动堆叠。

以下是示例代码，你可以根据实际内容调整：

<div class="container">
  <div class="row">
    <!-- 移动端顶部区域（桌面端右侧） -->
    <div class="col-md-6 order-md-2">
      <img src="你的图片路径" class="img-fluid" alt="内容图片">
    </div>
    <!-- 移动端中间区域（桌面端左侧） -->
    <div class="col-md-6 order-md-1">
      <h3>标题内容</h3>
      <p>这里是你的文本内容，支持多行显示...</p>
    </div>
    <!-- 移动端底部区域（全宽） -->
    <div class="col-12 mt-3">
      <p>底部的附加内容区域，移动端和桌面端都占满宽度</p>
    </div>
  </div>
</div>

关键说明： #

• col-md-6：在屏幕宽度≥768px（中等屏幕，即桌面）时，两列各占50%宽度；移动端自动变为100%宽度（col-12是默认行为，无需额外声明）。
• order-md-1/order-md-2：仅在中等屏幕及以上生效，调整列的显示顺序，让原本在HTML前面的列（移动端顶部）在桌面端显示到右侧。
• img-fluid：确保图片在响应式布局中自动适配容器宽度，避免溢出。

内容的提问来源于stack exchange，提问作者lethetai