如何在Bootstrap 5中根据屏幕横竖屏方向重新排列页面区块

嘿，这个需求其实很好实现，结合Bootstrap的Flexbox网格特性和CSS的横竖屏媒体查询就能搞定，不用太复杂的逻辑～我给你拆解成易懂的步骤：

核心思路 #

咱们的目标是：

• 横屏状态（默认）：保持原布局——左列上方是Section1，下方是Section2，右列是Section3
• 竖屏状态：把整个布局改成单列，顺序变为 Section1 → Section3 → Section2

因为Bootstrap的网格系统基于Flexbox，所以我们可以用order属性来控制元素的排列顺序，再配合@media (orientation: portrait)媒体查询来触发竖屏时的样式变化。

具体实现步骤 #

1. 调整HTML结构（给关键区块加标识类） #

先给需要调整顺序的区块加上专属类，方便CSS精准定位，修改后的核心HTML如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<a href="#" id="switch" class="btn btn-primary btn-large" style="display:block; margin: 30px auto 30px; width: 200px;">Switch Orientation</a>

<div class="screen">
  <div class="row gy-4">
    <!-- 左列：包含Section1和Section2 -->
    <div class="col-12 col-md-7 left-column">
      <div id="infopanel" class="section-1">
        <h2>Section 1</h2>
      </div>
      <div class="mt-1 row gx-3 gy-3 section-2">
        <!-- 原Section2的内容不变 -->
        <div class="col-4">
          <div class="box green">
            <h2>Sec. 2</h2>
            <h3>Item 1</h3>
          </div>
        </div>
        <div class="col-4">
          <div class="box purple">
            <h2>Sec. 2</h2>
            <h3>Item 2</h3>
          </div>
        </div>
        <div class="col-4">
          <div class="box gold">
            <h2>Sec. 2</h2>
            <h3>Item 3</h3>
          </div>
        </div>
        <div class="col-4">
          <div class="box lightblue">
            <h2>Sec. 2</h2>
            <h3>Item 4</h3>
          </div>
        </div>
        <div class="col-4">
          <div class="box red">
            <h2>Sec. 2</h2>
            <h3>Item 5</h3>
          </div>
        </div>
        <div class="col-4">
          <div class="box slate">
            <h2>Sec. 2</h2>
            <h3>Item 6</h3>
          </div>
        </div>
      </div>
    </div>
    <!-- 右列：Section3 -->
    <div class="col-12 col-md-5 section-3">
      <div id="whitepanel">
        <h2 class="text-center" style="color:darkslategray">Section 3</h2>
        <div class="dailybutton purple">
          <p>Item 1</p>
        </div>
        <div class="dailybutton green">
          <p>Item 2</p>
        </div>
        <div class="dailybutton red">
          <p>Item 3</p>
        </div>
        <div class="dailybutton blue">
          <p>Item 4</p>
        </div>
        <div class="dailybutton gold">
          <p>Item 5</p>
        </div>
      </div>
    </div>
  </div>
</div>

2. 编写CSS控制横竖屏顺序 #

添加以下CSS代码，专门处理竖屏时的排列逻辑：

/* 竖屏状态下的样式 */
@media (orientation: portrait) {
  /* 把主row从横向排列改成纵向排列 */
  .screen .row:first-child {
    flex-direction: column;
  }

  /* 让左右两列在竖屏时都占满宽度 */
  .left-column, .section-3 {
    width: 100%;
    max-width: 100%;
  }

  /* 控制三个区块的顺序：Section1排最前，然后是Section3，最后是Section2 */
  .section-1 {
    order: 1;
  }
  .section-3 {
    order: 2;
    margin-top: 1.5rem; /* 给Section3加个上边距，和原布局的间距保持一致 */
  }
  .section-2 {
    order: 3;
  }
}

/* 可选：模拟横竖屏切换的样式（配合按钮测试） */
body.simulate-portrait .screen .row:first-child {
  flex-direction: column;
}
body.simulate-portrait .left-column, 
body.simulate-portrait .section-3 {
  width: 100%;
  max-width: 100%;
}
body.simulate-portrait .section-1 {
  order: 1;
}
body.simulate-portrait .section-3 {
  order: 2;
  margin-top: 1.5rem;
}
body.simulate-portrait .section-2 {
  order: 3;
}

3. 可选：添加JS实现一键测试（不用真旋转屏幕） #

如果想在桌面浏览器里快速测试效果，可以给你的“Switch Orientation”按钮加个点击事件，模拟横竖屏状态：

document.getElementById('switch').addEventListener('click', function(e) {
  e.preventDefault();
  document.body.classList.toggle('simulate-portrait');
});

效果说明 #

• 当设备处于横屏（或浏览器窗口宽大于高）时，布局和你原来的完全一致
• 当设备切换到竖屏（或浏览器窗口高大于宽）时，会自动变成单列，顺序是Section1 → Section3 → Section2
• 点击“Switch Orientation”按钮，可以在桌面端快速切换模拟状态，方便调试

内容来源于stack exchange