Bootstrap Lines - Make bottom line top

Question

I have a problem with bootstrap lines. I want to use images on the right and left, as on modern websites. However, on smaller screens, I need the image to be at the top.

However, this happens:

I was thinking about using flex, but it does not have the response lines that I need in order for the image to be fluid.

<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

You had the right idea! The Bootstrap v4 mesh system can handle flexibility modifiers.

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 .

@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;
  }

}

<div class="container">
  <div class="row reorder-xs">

    <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="https://dummyimage.com/300"></img>

    </div>

  </div>
</div>

Hide result

Answer 3

If I understand correctly, try the following:

<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>

Run codeHide result

Thank.