html – Bootstrap行 – 使底行显示在顶部

2023年10月13日 205次阅读

我遇到了bootstrap行的问题.我想正确使用图像&留在现代网站.但是在较小的屏幕上,我需要将图像放在顶部.

《html – Bootstrap行 – 使底行显示在顶部》

但是,这发生了：

《html – Bootstrap行 – 使底行显示在顶部》

我想过使用flex,但它没有响应行,我需要图像流畅.

<div class="container">
  <div class="row">

    <div class="col-md-7 col-sm-12 col-xs-12 ">

      // Text Data

    </div>

    <div class="col-md-5 col-sm-12 col-xs-12 ">

      <img class="img-fluid" src="url"></img>

    </div>

  </div>
</div>

最佳答案 你有正确的想法！ Bootstrap v4网格系统可以处理flex修饰符.

https://v4-alpha.getbootstrap.com/layout/grid/#flex-order

在您的情况下,flex-first修饰符将在文本之前移动内容.您也可以将它们与断点一起使用,即flex-md-first

<div class="container">
  <div class="row">
    <div class="col-md-7 col-sm-12 col-xs-12">
      // Text Data
    </div>
    <div class="col-md-5 col-sm-12 col-xs-12 flex-md-first">
      <img class="img-fluid" src="url"></img>
    </div>
  </div>
</div>

Codepen：https://codepen.io/sidhuko/pen/gxwprN

点赞