Bootstrap 4（4.1）列排序布局适配咨询：移动端与桌面端展示差异实现

这个布局在Bootstrap 4.1里完全可以搞定，核心就是利用它的栅格系统和弹性盒布局的order排序类，我给你写了一个直接能用的实现方案：

完整代码示例 #

<div class="container">
  <div class="row">
    <!-- 区块A：桌面占左半列，移动端全宽 -->
    <div class="col-md-6 bg-primary p-3 mb-3 mb-md-0">A</div>
    
    <!-- 区块B：桌面占右半列，移动端排在A之后 -->
    <div class="col-md-6 bg-secondary p-3 mb-3 mb-md-0 order-md-2">B</div>
    
    <!-- 区块C：桌面占左半列（A下方），移动端排在B之后 -->
    <div class="col-md-6 bg-success p-3">C</div>
  </div>
</div>

布局逻辑解释 #

移动端（屏幕宽度<768px） #

所有区块默认都是全宽（Bootstrap 4移动端默认行为），顺序完全遵循HTML结构的 A → B → C，完美匹配你的需求。

桌面端（屏幕宽度≥768px） #

• 区块A和C都设置了col-md-6，并且通过order-md-1（A默认就是这个值，C显式指定）让它们属于同一排序组，所以会按HTML顺序在左侧列上下排列（A在上，C在下）。
• 区块B设置了col-md-6和order-md-2，排序值比A/C大，所以会被放到右侧列，和A保持同一行。

另外，我加了mb-3 mb-md-0是为了给移动端的区块之间增加底部间距，桌面端则去掉间距，让布局更紧凑美观。

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