[Vuejs]-Bootstrap flex-column-reverse pushes column to new line

by

0👍

A little bit of back n-forth found out the solution.

 flex-column-reverse

-is a vertical reverseŕ,thus its always pushing it to the new line, so having it be the only one on it, our row doesn’t know to change on a larger size so we add this:

flex-md-row-reverse

note the row in it, since we are setting it, horizontally

0👍

If you want content / image – content / image on small screens, then you should set the order that way. Then, to have the content and images switch place on larger screens, add order-md-first to the even lines.

I’ve modified the code from your Fiddle:

  <div class="row p-5">
    <div class="col-12 col-md-6 about-text-center">
      <h2 class="about-title ">Title 1</h2>
      <p class="about-p text-muted">Desc 1</p>
    </div>
    <div class="col-12 col-md-6 about-img-wrapper">
      <h2>MY IMAGE1</h2>
    </div>
  </div>


  // Next row

  <div class="row p-5">
    <div class="col-12 col-md-6 about-text-center">
      <h2 class="about-title "> Title 2</h2>
      <p class="about-p text-muted">Desc 2</p>
    </div>
    <div class="col-12 col-md-6 about-img-wrapper order-md-first">
      <h2>MY IMAGE2</h2>
    </div>
  </div>
</div>

Leave a comment