我怎样才能改变的顺序，第5段和图像的引导带5只在手机上？

Question

我已经尝试了订单-xs-1和订单-xs-优先，但没有一个是有效的，我不知道为什么。我想在手机上的形象是第一和第二段。

<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

您的代码有很多错误。我会回到正确的阅读引导处理断点的方式。如果您指定了col-md-6，则不需要所有其他的col 6，因为断点是从分辨率开始工作的。

至于您的确切问题，很容易解决这个问题，方法是先将列放在HTML中，然后让引导程序在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类，或者使用CSS来改变标题的大小。标题标签也应按H1->H2等顺序排列.