Cambiar orden de columnas con Bootstrap

El otro día un compañero de mi equipo de trabajo tuvo problemas a la hora de hacer una maquetación. Quería tener dos columnas y hacer que en modo XS de Bootstrap cambiaran de orden. Tras varios intentos me puse con él y le explique como hacerlo y el motivo de su “lio”.

Por intuición uno piensa que las clases de Bootstrap permiten cambiar el orden desde el modo en el que lo configures (xs, sm, md o lg) hacia “abajo” (modo móvil), con lo que su código inicial era:

<div class="col-sm-4 col-xs-push-12">column 1</div>
<div class="col-sm-8 col-xs-pull-12">column 2</div>

Código incorrecto, ya que es en nuestro HTML donde debemos hacer el cambio de orden para que nuestras columnas se cambien en modo xs y aplicar las clases de ordenación en los modos “superiores”:

<div class="col-sm-4 col-sm-push-8">column 2</div>
<div class="col-sm-8 col-sm-pull-4">column 1</div>
Anuncios

Etiquetado:

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: