如何在Bootstrap 5中实现移动端特定元素排序调整？

问题核心 #

需要在sm断点及以下将带example2图片的按钮栏放在布局最顶部，接着展示example1图片，最后显示剩余内容，通过Bootstrap 5的响应式flex排序和显示类即可实现。

修改后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row mt-5">
  <!-- 移动端专属按钮栏：sm及以下显示，排第1位 -->
  <div class="col-12 d-lg-none order-sm-1 mb-3">
    <div class="d-flex">
      <img class="img-fluid me-5" src="example2" alt="">
      <button type="button" class="btn btn-outline-dark px-5 py-2 fw-semibold fs_14">TERVEZZ SAJÁT SZÍNEKKEL</button>
    </div>
  </div>

  <!-- Example1图片容器：移动端排第2位 -->
  <div class="col-lg-6 order-sm-2">
    <img class="img-fluid" src="example1" alt="">
  </div>

  <!-- 右侧内容容器：移动端排第3位 -->
  <div class="col-lg-6 order-sm-3">
    <!-- 大屏专属按钮栏：lg及以上显示，移动端隐藏 -->
    <div class="d-none d-lg-block d-flex">
      <img class="img-fluid me-5" src="example2" alt="">
      <button type="button" class="btn btn-outline-dark px-5 py-2 fw-semibold fs_14">TERVEZZ SAJÁT SZÍNEKKEL</button>
    </div>

    <h1 class="fw-light mt-5 mb-4">N2001<sup class="ms-1 fs-4">4.13</sup></h1>
    <div class="d-flex fs_20">
      <p class="me-3 mb-0">nettó</p>
      <p class="me-3 mb-0">25.500 Ft</p>
      <p class="me-3 mb-0">&frasl;</p>
      <p class="mb-0">m<sup class="">2</sup></p>
    </div>
    <div class="d-flex opacity_60 mb-4">
      <p class="me-3">bruttó</p>
      <p class="me-3">35.000 Ft</p>
      <p class="me-3">&frasl;</p>
      <p>m<sup class="">2</sup></p>
    </div>

    <div class="d-flex">
      <p class="me-3">szükséges</p>
      <p class="me-3">100</p>
      <p class="me-3">&or;</p>
      <p>m<sup class="">2</sup></p>
    </div>
    <p class="opacity_80 mb-5 text-black">Javasoljuk, hogy számolj további 10-15%-kal, a vágási hulladék miatt.</p>

    <div class="d-flex align-items-center mb-5">
      <button type="button" class="btn btn-outline-dark px-5 py-2 fw-semibold fs_14 me-5">AJÁNLATOT KÉREK</button>
      <input class="form-check-input fs-4 me-2 mt-0" type="checkbox" value="" aria-label="checkbox">
      <p class="fs_12 m-0 align-items-center d-flex text-black">SEGÉDANYAG HOZZÁADÁSA</p>
    </div>
    <p class="opacity_80">Lorem ipsum</p>
  </div>
</div>

关键实现逻辑 #

• 双容器控制显示：做了两个完全相同的按钮栏，分别用d-lg-none（大屏隐藏）和d-none d-lg-block（移动端隐藏）实现不同断点下的显示切换，保证大屏布局不变。
• 响应式排序：通过order-sm-*类指定移动端的元素顺序：
  • order-sm-1：让移动端按钮栏排在最前
  • order-sm-2：让example1图片容器排在第二位
  • order-sm-3：让右侧剩余内容排在第三位
• 网格适配：移动端按钮栏用col-12占满整行，不破坏原有大屏的两列布局结构。

内容的提问来源于stack exchange，提问作者Áron Leidli