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

Question

我遇到了bootstrap行的问题。我想正确使用图像＆amp;留在现代网站。但是在较小的屏幕上，我需要将图像放在最顶层。

然而，这种情况发生了：

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

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

Answer 2

你不能颠倒col-xs-12的顺序，但这里有点破解:)。 当宽度等于767px或min。

时，文本位于图像下方

fos_user:
    db_driver: orm # other valid values are 'mongodb', 'couchdb' and 'propel'
    firewall_name: main
    user_class: AppBundle\Entity\User
    registration:
        form:
            name: app_user_registration

@media (max-width: 767px) {

  .row.reorder-xs {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

    direction: rtl;
  }

  .row.reorder-xs > [class*="col-"] {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);

    direction: ltr;
  }

}

Answer 3

如果我理解正确，请尝试：

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">

    <div class="col-md-7 col-md-push-5">

      // Text Data

    </div>

    <div class="col-md-5 col-md-pull-7">

      <img class="http://via.placeholder.com/350x150" src="url"></img>

    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

感谢。