CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Sam.tuver
Sam.tuver

Reputation: 709

Bootstrap rows - Make bottom row appear on top

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.

enter image description here

However, this happens :

enter image description here

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>

Upvotes: 4

Views: 1280

Answers (3)

Rohan
Rohan

Reputation: 467

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.

Upvotes: 0

sidhuko
sidhuko

Reputation: 3376

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

Upvotes: 1

R&#233;my Testa
R&#233;my Testa

Reputation: 897

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>

Upvotes: 0

Related Questions