Archivo de la etiqueta: bootstrap

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

Yamm – Bootstrap Megamenu

Yamm es un megamenu CSS responsivo que amplia el componente navbar de Bootstrap 3 para poder entre otras cosas simular un menu multinivel o multidropdown.

Además, podemos tener la capacidad de usar otros componentes Bootstrap dentro de los dropdown del componente navbar (formularios, paneles, listas de media…), así como el sistema de rejillas (grid) propio de Boostrap.

Página oficial de Yamm Boostrap Megamenu.