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

Question

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