Html 引导行-使底部行显示在顶部

我对引导行有问题。我想在现代网站中使用左右图像。但是在较小的屏幕上，我需要图像位于顶部

然而，这种情况会发生：

我曾考虑过使用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>

//文本数据

您不能将col-xs-12的顺序颠倒，但这里有一个小技巧：）。 当宽度等于767px或min时，文本位于图像下方

@介质（最大宽度：767px）{
.row.reorder-xs{
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-ms变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
方向：rtl；
}
.row.reorder-xs>[class*=“col-”]{
-webkit变换：旋转（-180度）；
-moz变换：旋转（-180度）；
-ms变换：旋转（-180度）；
-o变换：旋转（-180度）；
变换：旋转（-180度）；
方向：ltr；
}
}

//文本数据

你的想法是对的！Bootstrap v4网格系统可以处理flex修改器

在您的情况下，

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>

//文本数据

---

代码笔：

如果我理解正确，请尝试以下操作：

//文本数据

它已被应答。请看这里！您链接的问题没有为bootstrap-v4添加标签，答案只为v3接受，所以它不会重复。有趣的解决方案，但您不需要：）啊，是的，我没有想到检查bootstrap 4，太棒了