使用col-6引导响应位置和中心文本

Question

我遇到了两个问题

• col-6中心文本我们应该做什么才能改变到中心，需要改成行？
• 当尺寸较小时，如何在底部设置图像和文字

<div class="container-fluid ">

  <div class="col-md-6 ser-first-grid text-center">

    <img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />

  </div>

  <div class="col-md-6 ser-first-grid text-center">


    <h3>PRODUCT SOURCING</h3>
    <p>We assist clients in sourcing suppliers to meet specific product requirements.</p>


  </div>

</div>

<div class="container-fluid">

  <div class="col-md-6 ser-first-grid text-center">

    <h3>DESIGN DEVELOPMENT</h3>
    <p>MALCORP possesses the capacity to design specific and specialized products to meet the most discerning of customer requirements.</p>
  </div>
  <div class="col-md-6 ser-first-grid text-center">


    <img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />

  </div>

</div>

Answer 1

检查此jsfiddle link

此处使用bootstrap flex-order进行列的响应式排序。更多信息Bootstrap flex-order

在第二列添加此类order-md-1，在第一列添加order-md-2。

至于对中部分，列上的text-center课程应该有效。

此外，您必须将列放在行内。