如何使用Bootstrap实现水平Div转垂直布局并调整移动端Div顺序

没问题，这事儿用Bootstrap的响应式排序类就能轻松搞定！核心思路是利用Bootstrap网格系统的响应式排序工具，在桌面端保持原有的水平排列顺序，在移动端调整Div的显示顺序。

实现步骤与代码示例 #

这里以Bootstrap 5为例（如果用Bootstrap 4，只需要调整排序类的前缀即可）：

<div class="container mt-4">
  <div class="row">
    <!-- Div A：默认顺序，移动端第一个显示 -->
    <div class="col-md-3 p-3 border bg-light">
      Div A
    </div>
    
    <!-- Div B：桌面端第二个，移动端第三个显示 -->
    <div class="col-md-3 p-3 border bg-light order-3 order-md-2">
      Div B
    </div>
    
    <!-- Div C：桌面端第三个，移动端第二个显示 -->
    <div class="col-md-3 p-3 border bg-light order-2 order-md-3">
      Div C
    </div>
    
    <!-- Div D：默认顺序，移动端第四个显示 -->
    <div class="col-md-3 p-3 border bg-light">
      Div D
    </div>
  </div>
</div>

代码解释 #

• 水平布局实现：col-md-3表示在中等屏幕（≥768px）及以上，每个Div占3列（Bootstrap网格共12列，4个3列刚好填满一行，实现水平排列）。
• 移动端顺序调整：
  • order-*是Bootstrap 5针对超小屏幕（<768px，即移动端）的排序类，数字越小越靠前。
  • 给Div B设置order-3，Div C设置order-2，这样移动端就会按A → C → B → D的顺序垂直排列。
• 桌面端顺序保持：order-md-*针对中等屏幕及以上，给Div B设置order-md-2，Div C设置order-md-3，恢复桌面端A → B → C → D的水平顺序。

适配Bootstrap 4的小改动 #

如果你的项目用的是Bootstrap 4，只需要把移动端排序类改成order-xs-*即可，比如：

<div class="col-md-3 p-3 border bg-light order-xs-3 order-md-2">Div B</div>
<div class="col-md-3 p-3 border bg-light order-xs-2 order-md-3">Div C</div>

这样就能完美满足你的需求啦！

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