Estoy buscando alguna manera de poder ordenar los div para que siempre quede la imagen arriba de los textos, la idea es que cuando este en pc se puede ver uno al lado del otro y en mobiles quede siempre la imagen arriba de los textos, de la manera en la que lo tengo el primer bloque la imagen queda debajo del texto, pensé en un @media para ocultar la imagen y colocar otra cuando este en mobiles, pero podría ser un poco pesado al echo de poder mas fotos en la pagina, si alguien sabe de solucionarlo, solo estoy usando Boostrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="row">
<div class="col-12 col-md-7">
<h1>Basic</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</p>
</div>
<div class="col-12 col-md-5">
<img class="img-fluid img-thumbnail">
</div>
</div>
<div class="row">
<div class="col-12 col-md-5 ">
<img class="fluid img-thumbnail">
</div>
<div class="col-12 col-md-7 topB">
<h1>Medium </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</p>
</div>
</div>