Bootstrap rows - Make bottom row appear on top

Question

I'm having an issue with bootstrap rows . I want to use images right & left as in modern websites . However on smaller screens , i need the image to be at the top.

However, this happens :

I thought about using flex , but it does not have responsive rows which i need 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>

https://stackoverflow.com/questions/20979062/bootstrap-right-column-on-top-on-mobile-view it is already answered. Please look here! — Sanket Patel, Aug 02 '17 at 15:16
Question you linked isn't tagged for bootstrap-v4 and answer accepted is only for v3 so it is not duplicated. — sidhuko, Aug 02 '17 at 15:34

sidhuko · Accepted Answer · 2017-08-02T15:33:06.050

You had the right idea! Bootstrap v4 grid system can handle flex modifiers.

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

In your case the flex-first modifier will move the content before the text. You can use these with breakpoints too i.e. 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

score 0 · Answer 2 · answered Aug 02 '17 at 15:17

You can't inverse order of your col-xs-12 but here a little hack :). The Text come below the image when width equal to 767px or min.

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

Interesting solution but you don't need to :) https://v4-alpha.getbootstrap.com/layout/grid/#flex-order — sidhuko, Aug 02 '17 at 15:23

score 0 · Answer 3 · answered Aug 03 '17 at 05:26

If i understand properly please try this:

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

Thanks.

Bootstrap rows - Make bottom row appear on top

3 Answers3