Estimados, usando como framework Bootstrap 3 estoy haciendo la maqueta de una web responsive donde las columnas del cuerpo se comportan de la siguiente manera:
En lg y md:
[ 1 ] [ 2 ] [ 3 ] [ 4 ]
y en sm queda así:
[ 1 ] [ 2 ]
[ 3 ] [ 4 ]
Mi problema es que cuando se apila para xs quedan así:
[ 1 ]
[ 3 ]
[ 2 ]
[ 4 ]
cuando en realidad quisiera que quedaran en orden, o sea
[ 1 ]
[ 2 ]
[ 3 ]
[ 4 ]
Pistas o sugerencias para lograrlo? Desde ya, muchas gracias
Actualmente mi código sería algo así:
Código HTML:
<div class="row">
<div class="col-md-3 col-sm-6">
Columna 1
</div>
<div class="col-md-3 col-md-push-3 col-sm-6">
Columna 3
</div>
<div class="col-md-3 col-md-pull-3 col-sm-6">
Columna 2
</div>
<div class="col-md-3 col-sm-6">
Columna 4
</div>
</div>