响应式设计场景下如何实现3个div的自定义排列 可使用Bootstrap或CSS

方案1：使用Bootstrap 5（无需额外编写复杂CSS） #

利用Bootstrap自带的栅格排序和偏移类即可快速实现需求，代码示例如下：

<div class="container">
  <div class="row g-3">
    <!-- 区块B：移动端排第一位，桌面端排在右侧上部 -->
    <div class="col-12 col-md-6 order-1 order-md-2">
      <div class="bg-primary p-4 text-white">区块B</div>
    </div>
    <!-- 区块A：移动端排第二位，桌面端占据左侧整列高度 -->
    <div class="col-12 col-md-6 order-2 order-md-1">
      <div class="bg-success p-4 text-white h-100">区块A</div>
    </div>
    <!-- 区块C：移动端排第三位，桌面端排在右侧下部 -->
    <div class="col-12 col-md-6 order-3 offset-md-6">
      <div class="bg-warning p-4 text-dark">区块C</div>
    </div>
  </div>
</div>

• order-*类用于控制不同断点下的元素视觉排序，md断点对应桌面端宽度≥768px的场景
• 桌面端给区块C添加offset-md-6类，即可让它偏移到右侧第二行，和区块B上下对齐
• 移动端断点下三个区块会自动按B、A、C的顺序垂直堆叠，符合展示要求

方案2：纯CSS Flex实现 #

不需要引入框架，用原生Flex布局的排序属性即可实现，代码示例如下：

<!-- HTML结构 -->
<div class="flex-container">
  <div class="block-b">区块B</div>
  <div class="block-a">区块A</div>
  <div class="block-c">区块C</div>
</div>

/* 桌面端样式 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.block-a {
  background: #20c997;
  flex: 0 0 calc(50% - 6px);
  order: 1;
  min-height: 200px;
  padding: 16px;
  color: #fff;
}
.block-b {
  background: #0d6efd;
  flex: 0 0 calc(50% - 6px);
  order: 2;
  min-height: 90px;
  padding: 16px;
  color: #fff;
}
.block-c {
  background: #ffc107;
  flex: 0 0 calc(50% - 6px);
  order: 3;
  min-height: 90px;
  padding: 16px;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .block-a, .block-b, .block-c {
    flex: 0 0 100%;
  }
  .block-b {
    order: 1;
  }
  .block-a {
    order: 2;
  }
  .block-c {
    order: 3;
  }
}

核心逻辑是利用Flex的order属性修改元素的视觉排序，HTML结构将B放在最前面的写法也能保证SEO、屏幕阅读器的读取顺序符合预期，响应式断点的宽度阈值可以根据自己的业务需求调整。

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