如何仅在移动设备上更改 Bootstrap 5 上的段落和图像的顺序？

Question

我已经尝试使用 order-xs-1 和 order-xs-first，但是 none 可以正常工作，我不知道为什么。我希望在移动设备上首先是图片，然后是段落。

<div class="container"> <div class="row bg-white g-0"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 pt-5 ps-5 "> <h2 class="fs-1 fw-light">Make It The Best</h2> <h4 class="fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4> <p>A wonderful serenity has taken.</p> <button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 "> <img src="/images/section3/drink.jpg" class="img-fluid" alt=""> </div> </div> </div>

Answer 1

您的代码有很多问题。我会回去仔细阅读 bootstrap 处理断点的方式。如果您已指定 col-md-6，则不需要所有其他 col-SZ-6，因为断点从分辨率 UP 开始工作。

至于您的确切问题，可以通过将列放在 HTML 中然后让 bootstrap 将其移动到 iPad 断点处 order-md-last 来轻松解决]:

<div class="container">
  <div class="row bg-white g-0">
    <div class="col-12 col-md-6 order-md-last mb-3">
      <img src="/images/section3/drink.jpg" class="img-fluid" alt="">
    </div>
    
    <div class="col-12 col-md-6">
      <h1 class="h2 fs-1 fw-light">Make It The Best</h2>
      <h2 class="h4 fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4>
      <p>A wonderful serenity has taken.</p>
      <button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button>
    </div>
    
  </div>
</div>

您也不应该使用 H 标签来设置标题样式，可以像我一样应用 H class 或使用 CSS 来更改标题的大小。标题标签也应按 H1->H2 等顺序排列...

如何仅在移动设备上更改 Bootstrap 5 上的段落和图像的顺序？

How can I change the order of the parahraph and image on Boostrap 5 only on mobile?

bootstrap-5