Question

我想首先在移动视图中获取图片，这意味着图片将会在使用bootstap 4.3.1的文本上方

看看这张照片，这就是我想要在手机上的样子！

   <div class="container-fluid feature-section">
       <div class="row">

          <!--Left feature section start-->

           <div class="col-6">
               <div class="feature-text" style=";">
               <div class="feature-text-next" style=";">
                   <h2>We build successful,<br />long-lasting.</h2>
                   <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable

                       There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believabl</p>
                   <a href="sksajib.com" class="-btn">Get started</a>

               </div>
           </div>
      </div>

           <div class="col-6">
                <img src="assets/img/feature1.jpg" class="img-fluid" alt="">
           </div>

Answer 1

您可以使用.order-xs- *或.pull / .push类在移动/桌面视图上订购内容。

喜欢：

<h2>With column ordering</h2>
  <div class="row">
    <div class="col-sm-6 order-xs-2">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-xs-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
  </div>

供参考：

链接：https://getbootstrap.com/docs/4.0/layout/grid/#reordering

链接：https://codepen.io/ondrejsvestka/pen/qmbeMe

使用bootstarp 4文本之前，图像应该进入移动视图

1 个答案: