html - Bootstrap 行 - 使底部行出现在顶部

Question

我遇到 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>

Answer 1

你的想法是正确的! 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>

代码笔:https://codepen.io/sidhuko/pen/gxwprN