如何更改Boostrap 5上的段落和图像的顺序?

Question

我尝试过order-xs-1和order-xs-first，但没有工作，我不知道为什么。我希望在移动设备上，图像是第一，段落是第二。

<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

你的代码有很多问题。我会回去，有一个适当的阅读方式引导处理断点。如果你指定了color -md-6，你不需要所有其他的color - sz -6，因为断点从分辨率UP开始工作。

对于您的确切问题，可以通过将列放在HTML中，然后让bootstrap使用order-md-last:

在iPad断点处移动它来轻松解决。

<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类，要么使用CSS来改变标题的大小。标题标签也应该按照H1->H2等的顺序排列。