Reordenar columnas con Booststrap

Supongamos que tenemos dos bloques; el “A” y el “B”, se solicita que para la versión de escritorio primero se vea el bloque “A” y para la versión móvil cambie el orden y primero se vea el bloque “B”.
Para hacer esto existen diferentes caminos, el que nosotros usaremos como ya miraste en el título es con Bootstrap… con las clases “order-breakpoint-position“, recordemos que los “breakpoints” son “xs“, “sm“, “md“, “lg“, “xl” dependiendo la versión Booststrap que uses.
Nota: Esta clase se implementa desde la versión 4 de Bootstrap

Pues bien, vamos a ver cómo se aplica esto en código, aquí nosotros estamos suponiendo que ya tienes integrado Bootrstrap a tu proyecto.

<div class="row">
    <div class="col-sm-6 order-sm-2">
        <!-- Aquí va lo del bloque B -->
    </div>
    <div class="col-sm-6 order-sm-1">
        <!-- Aquí va lo del bloque A -->
    </div>
</div>

Vista escritorio