Bootstrap 5 浮动列实现侧边栏拆分至主内容上下两侧

没问题，我来帮你搞定这个布局！Bootstrap 5的Flexbox网格系统正好能轻松实现这个需求，不用依赖浮动——你之前的代码问题在于列宽总和超过了12，而且没利用好Bootstrap的响应式顺序控制类。

下面是直接就能运行的完整示例，完全用Bootstrap 5原生类实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 5 响应式布局示例</title>
  <!-- 可选：给区块加个内边距方便看效果 -->
  <style>
    .col-md-4, .col-md-8 {
      padding: 2rem;
    }
  </style>
</head>
<body>
  <div class="container mt-4">
    <div class="row">
      <!-- 顶部侧边栏区块：移动端在最上方，桌面端在右侧顶部 -->
      <div class="col-md-4 order-md-2 bg-info">
        <h3>Title</h3>
        <p>这是右侧侧边栏的顶部区块内容</p>
      </div>

      <!-- 主内容区块：移动端在中间，桌面端在左侧 -->
      <div class="col-md-8 order-md-1 bg-success">
        <h2>Main Section</h2>
        <p>这是左侧的主内容区域，占据桌面端80%的宽度</p>
        <p>更多主内容示例文本...</p>
      </div>

      <!-- 底部侧边栏区块：移动端在最下方，桌面端在右侧底部 -->
      <div class="col-md-4 order-md-2 bg-primary">
        <h3>Foot Notes</h3>
        <p>这是右侧侧边栏的底部区块内容</p>
      </div>
    </div>
  </div>

  <!-- 可选：引入Bootstrap JS（如果需要用到交互组件的话） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

核心逻辑说明： #

• 响应式顺序控制：用order-md-*类控制元素在不同断点的顺序：
  • 默认（移动端，屏幕宽度<768px）：元素按照DOM中的顺序排列，也就是Title → Main Section → Foot Notes
  • 桌面端（屏幕宽度≥768px）：order-md-1让主内容排在最左侧，order-md-2让两个侧边栏区块排在右侧，并且因为它们都是col-md-4，会自动垂直堆叠在右侧的4列空间里
• 列宽分配：col-md-8和col-md-4实现桌面端的8-4分栏，移动端下所有列自动占满100%宽度
• Flexbox原生支持：Bootstrap 5的网格系统基于Flexbox，所以完全不需要用浮动来控制布局，原生类就能搞定所有响应式需求

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