如何用CSS实现移动端与桌面端不同的布局？（Bootstrap 4）

嘿，这个问题其实用Bootstrap 4的栅格偏移和基础布局就能轻松解决！核心思路是先按照移动端的理想顺序写HTML结构，然后通过栅格的offset-md-*类调整桌面端的元素位置，这样就能兼顾两端的布局需求了。

你现在的代码是先写左侧列（A+D）再写右侧列（B+C），所以移动端会先显示A、D，再显示B、C，不符合需求。我们换个思路，把HTML结构改成移动端需要的顺序：A → B → C → D，然后调整桌面端的栅格类让C和D回到正确位置。

下面是完整的实现代码：

<div class="container">
  <div class="row">
    <!-- A元素：移动端占满12列，桌面占4列 -->
    <div class="col-12 col-md-4">
      <div class="a">A</div>
    </div>
    <!-- B元素：移动端占满12列，桌面占8列 -->
    <div class="col-12 col-md-8">
      <div class="b">B</div>
    </div>
    <!-- C元素：移动端占满12列，桌面占8列并偏移4列（对齐B的位置） -->
    <div class="col-12 col-md-8 offset-md-4">
      <div class="c">C</div>
    </div>
    <!-- D元素：移动端占满12列，桌面占4列（对齐A的位置） -->
    <div class="col-12 col-md-4">
      <div class="d">D</div>
    </div>
  </div>
</div>

工作原理说明： #

• 移动端（屏幕宽度<768px）：所有元素都是col-12，会严格按照HTML顺序从上到下显示：A → B → C → D，完全匹配移动端的需求。
• 桌面端（屏幕宽度≥768px）：
  • A占4列，B占8列，第一行显示A（左侧）和B（右侧）；
  • C占8列且加了offset-md-4，会向右偏移4列，刚好对齐B的下方；
  • D占4列，会自动排在A的下方，最终左侧是A在上、D在下，右侧是B在上、C在下，完美还原你的桌面端布局。

如果需要给这些模块添加样式（比如背景、内边距），直接给.a、.b、.c、.d类写CSS就好，不会影响布局效果。

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