Categories
bootstrap-4 css html twitter-bootstrap

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="https://www.faqcode4u.com/faq/438690/url"></img>
</div>
</div>
</div>

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="https://www.faqcode4u.com/faq/438690/url"></img>
</div>
</div>
</div>

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