css - 使用 col-6 Bootstrap 响应位置和中心文本

Question

我遇到了两个问题

• col-6 center text 我们应该怎么做才能更改为居中，需要更改为行？
• 小尺寸时，如何设置图片和文字始终在底部

<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 类应该有效。

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