CSS - bring left column to bottom on mobile on flex row property with flex-flow reverse

0 votes
105 views
added Mar 23, 2022 in CSS by lcjr First Warrant Officer (9,190 points)
<div className="row no-gutters box-mid reverse">
  <div className="col-12 col-lg-7 bg-5">
    <h4>This go bottom</h4>
  </div>
  <div className="col-12 col-lg-5">
    <img src={`${assets}mid5.png`} />
  </div>
</div>

<style>
 .box-mid {
   display: flex;
    &.reverse {
      @media (max-width: 991px) {
        flex-flow: column-reverse;
      } 
    }
  }
</style>

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...