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.

However, this happens :

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>