Bootstrap 3如何实现响应式单列/双列布局并保持内容顺序？

没问题！这个需求完全可以实现，还能完美解决你提到的屏幕尺寸切换失效的问题。核心思路是保留HTML元素1-6的固定顺序，同时用Bootstrap 3的响应式清除浮动类来控制中等及以上屏幕的列布局，避免元素因高度差异错位。

实现原理 #

• 小屏幕（XS/SM）：让所有元素占满整行，自然按1-6顺序单列排列；
• 中等及以上屏幕（MD+）：每个元素占半列，同时在每一组左右列（1&2、3&4）之后添加仅在MD+屏幕生效的清除浮动元素，强制下一个元素从左列重新开始，这样就能保证左列是1、3、5，右列是2、4、6，且元素3始终紧跟元素1下方，不受元素2的高度影响。

完整代码示例 #

<div class="row">
  <div class="col-xs-12 col-md-6">1</div>
  <div class="col-xs-12 col-md-6">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis interdum diam, in tempor est. Pellentesque nulla mi, egestas et rhoncus non, rhoncus bibendum velit. Nulla facilisi. Aenean faucibus nulla rutrum elementum cursus. Nam vel varius libero, eu porttitor tortor. In et ultricies nunc. Duis volutpat posuere urna, id faucibus ante lobortis sit amet. Maecenas urna nisl, tristique eget sem vel, semper tincidunt nisi.</div>
  
  <!-- 仅在MD+屏幕清除浮动，让元素3回到左列 -->
  <div class="clearfix visible-md-block visible-lg-block"></div>
  
  <div class="col-xs-12 col-md-6">3</div>
  <div class="col-xs-12 col-md-6">4</div>
  
  <!-- 再次清除浮动，确保元素5从左列开始 -->
  <div class="clearfix visible-md-block visible-lg-block"></div>
  
  <div class="col-xs-12 col-md-6">5</div>
  <div class="col-xs-12 col-md-6">6</div>
</div>

为什么这个方法能解决问题？ #

你之前单独用两种代码时的问题：

• 第一种代码（无嵌套）在MD+屏幕下，若元素2高度高于元素1，元素3会被“挤”到右列，无法紧跟元素1；
• 第二种代码（嵌套列）在小屏幕下，会先显示左列的1、3、5，再显示右列的2、4、6，完全打乱了1-6的顺序。

而上面的代码：

• 小屏幕下，clearfix元素因为visible-md-block类不会显示，元素按原生HTML顺序1-2-3-4-5-6单列排列；
• MD+屏幕下，每两个元素后触发清除浮动，强制下一行从左列开始，完美实现左列1、3、5，右列2、4、6的布局，且元素3不受元素2高度影响。

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