响应式页面移动端布局调整：让蓝色Div置于橙黄Div之间

嘿，这个需求用Bootstrap的响应式布局工具就能轻松搞定！我结合你提供的代码结构，分两种常见的Bootstrap版本给出具体实现方案：

方案一：适配Bootstrap 3（你的代码用了col-xs-*，应该是用的这个版本） #

我们可以调整HTML结构，把蓝色元素放到橙色和黄色之间，然后用Bootstrap的列排序类在桌面端重新排布位置：

<div class="container"> 
  <div class="row"> 
    <!-- 橙色块：移动端占满一行，桌面端左侧4列 -->
    <div class="col-xs-12 col-md-4"> 
      <div class="row orange"></div> 
    </div> 
    <!-- 蓝色块：移动端占满一行，桌面端拉到右侧8列位置 -->
    <div class="col-xs-12 col-md-8 col-md-pull-4"> 
      <div class="row blue"></div> 
    </div> 
    <!-- 黄色块：移动端占满一行，桌面端推到橙色下方的4列位置 -->
    <div class="col-xs-12 col-md-4 col-md-push-8"> 
      <div class="row yellow"></div> 
    </div> 
  </div>
</div>

为啥这么写？ #

• 移动端（屏幕宽度<768px）：三个元素都是col-xs-12，会按HTML顺序从上到下排列：橙色 → 蓝色 → 黄色，完美符合你的要求。
• 桌面端（屏幕宽度≥768px）：
  • 橙色块留在左侧的4列区域。
  • 蓝色块通过col-md-pull-4向左偏移4个列宽，占据右侧的8列位置。
  • 黄色块通过col-md-push-8向右偏移8个列宽，回到橙色块的正下方，和原来的桌面布局一致。

方案二：适配Bootstrap 4/5（如果可以升级框架版本） #

Bootstrap4及以上用Flexbox做核心布局，我们可以直接用order-*响应式类控制元素顺序，结构更简洁：

<div class="container"> 
  <div class="row"> 
    <div class="col-12 col-md-4"> 
      <div class="orange"></div> 
    </div> 
    <!-- 蓝色块：移动端排第二，桌面端位置不变 -->
    <div class="col-12 col-md-8 order-2 order-md-2"> 
      <div class="blue"></div> 
    </div> 
    <!-- 黄色块：移动端排第三，桌面端排第一（回到橙色下方） -->
    <div class="col-12 col-md-4 order-3 order-md-1"> 
      <div class="yellow"></div> 
    </div> 
  </div>
</div>

原理说明 #

order-*是Flex布局的顺序控制类：

• 移动端：order-2让蓝色块在橙色块（默认order=1）之后，order-3让黄色块在蓝色块之后，实现橙色→蓝色→黄色的顺序。
• 桌面端：order-md-1把黄色块的优先级调高，让它回到左侧4列区域，和橙色块上下排列，蓝色块保持在右侧8列。

测试用样式（记得加上） #

为了能直观看到效果，给三个色块加个基础样式：

.orange { background-color: orange; height: 100px; margin: 10px 0; }
.blue { background-color: blue; height: 200px; margin: 10px 0; }
.yellow { background-color: yellow; height: 100px; margin: 10px 0; }

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