使用Bootstrap 4实现窗口缩放时Div的特定响应式布局需求

你需要结合Bootstrap 4的响应式栅格系统和order类来精准控制不同屏幕尺寸下的元素顺序，我直接给你一个可复用的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Layout Fix</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <style>
    /* 仅用于让列更显眼，实际项目可按需调整或删除 */
    .custom-col {
      padding: 2rem;
      border: 1px solid #ddd;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>

  <div class="container mt-4">
    <div class="row">
      <!-- 列2：小屏排第1位，大屏排第2位 -->
      <div class="col-6 col-md-4 custom-col order-1 order-md-2">
        [2]
      </div>

      <!-- 列3：小屏排第2位，大屏排第3位 -->
      <div class="col-6 col-md-4 custom-col order-2 order-md-3">
        [3]
      </div>

      <!-- 列1：小屏排第3位（自动换行），大屏排第1位 -->
      <div class="col-12 col-md-4 custom-col order-3 order-md-1">
        [1]
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键逻辑说明： #

• 栅格宽度控制：
  • 小屏（<768px）：列2和列3用col-6，各占一半宽度，自然在同一行展示；列1用col-12，占满整行宽度，自动换行到下方。
  • 大屏（≥768px）：三个列都用col-md-4，各占1/3宽度，横向排列成一行。
• 响应式order类：
  • order-*系列控制小屏的元素顺序：列2设为order-1、列3设为order-2，列1设为order-3（最后一位）。
  • order-md-*系列控制大屏的元素顺序：列1设为order-md-1（最前一位），列2设为order-md-2，列3设为order-md-3。

这样就能完美实现你想要的效果：全屏状态下是[navbar] [1][2][3]，窗口缩小后变为[navbar] [2][3]，换行显示[1]。

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