Bootstrap push/pull列布局求助：移动端与桌面端高度适配问题

嘿，我太懂你这个烦恼了！用Bootstrap的push/pull做布局时，浮动元素的高度影响真的很坑——当左侧的区块2比右侧的区块1高时，区块3就会被“挤”到区块2的下面，完全破坏了你想要的右侧1+3垂直排列的效果。

问题根源 #

你原来的代码里，三个区块都是独立的col-md-6列，放在同一个row里。Bootstrap 3的列是基于浮动实现的，当左侧的区块2高度超过右侧的区块1时，浮动的区块3会自动寻找前面浮动元素的下方位置，所以就跑到区块2下面去了。

解决方案：把1和3放进同一个右侧列容器 #

要让区块3不受区块2高度影响，关键是让1和3处于同一个列容器内，这样它们会在自己的列里垂直排列，和左侧列的高度彻底无关。

1. Bootstrap 3 适配方案

如果你的项目用的是Bootstrap 3，我们可以把区块1和3包裹在一个col-md-6 col-md-push-6的容器里，区块2单独用col-md-6 col-md-pull-6拉到左侧：

<div class="row">
  <!-- 右侧列：包含区块1和3，桌面端推到右侧 -->
  <div class="col-md-6 col-md-push-6">
    <div class="row">
      <div class="col-md-12">Section 1</div>
      <div class="col-md-12">Section 3 now stays right under Section 1, no matter how tall Section 2 gets!</div>
    </div>
  </div>
  
  <!-- 左侧列：区块2，桌面端拉到左侧 -->
  <div class="col-md-6 col-md-pull-6">
    Section 2 <br /> is taller than Section 1 with this 2nd line <br /> Let's add even more lines to test! <br /> One more line here.
  </div>
</div>

如果需要移动端顺序是1→2→3：
上面的代码在移动端会先显示1+3，再显示2，不符合需求的话，可以用Bootstrap的响应式显示类配合，避免重复内容：

<div class="row">
  <!-- 移动端专属：区块1 -->
  <div class="col-xs-12 hidden-md hidden-lg hidden-sm">Section 1</div>
  
  <!-- 区块2：全屏幕占满，桌面端占左半部分 -->
  <div class="col-md-6 col-xs-12">
    Section 2 <br /> is taller than Section 1 with this 2nd line <br /> Let's add even more lines to test! <br /> One more line here.
  </div>
  
  <!-- 右侧列：桌面端显示区块1+3，移动端只显示区块3 -->
  <div class="col-md-6 col-xs-12">
    <div class="hidden-xs visible-sm visible-md visible-lg">Section 1</div>
    <div class="col-xs-12">Section 3 now stays right under Section 1!</div>
  </div>
</div>

2. Bootstrap 4+ 适配方案（更简洁）

如果你的项目用的是Bootstrap 4或更高版本，因为它用Flexbox代替了浮动，处理这种布局会更简单。我们可以用order类调整移动端的顺序，同时让1和3在桌面端自动垂直排列：

<div class="row">
  <div class="col-md-6 order-md-2 order-1">Section 1</div>
  <div class="col-md-6 order-md-1 order-2">
    Section 2 <br /> is taller than Section 1 with this 2nd line <br /> Let's add even more lines to test! <br /> One more line here.
  </div>
  <div class="col-md-6 order-md-2 order-3">Section 3 now stays right under Section 1 on desktop!</div>
</div>

这样：

• 桌面端（md及以上）：order-md-1让区块2在左侧，order-md-2让1和3在右侧自动上下排列，完全不受区块2高度影响；
• 移动端：order-1/order-2/order-3让顺序变成1→2→3，完美匹配需求。

总结 #

不管用哪个版本的Bootstrap，核心思路都是让区块1和3处于同一个布局上下文（同一列容器或同一侧的Flex列），这样它们的垂直排列就不会被左侧区块的高度干扰。

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