Bootstrap 3
  • Contenidos
  • Introducción
    • Frameworks responsive
    • Funcionamiento del diseño adaptable
    • Probando el responsive
  • Página básica
  • Sistema de Rejilla
    • Forzar el cambio de fila
    • Anidamiento de columnas
    • Márgenes o espaciado entre columnas
    • Ordenación de columnas
  • Utilidades responsive
  • Media Queries
  • Componentes Responsive
    • Botones
    • Desplegables
    • Grupos de botones
    • Formularios
    • Navegación
    • Barra de navegación
    • Tablas
  • Ejercicios 1
  • Ejercicios 2
  • Bibliografía
Con tecnología de GitBook
En esta página

¿Te fue útil?

  1. Sistema de Rejilla

Ordenación de columnas

AnteriorMárgenes o espaciado entre columnasSiguienteUtilidades responsive

Última actualización hace 5 años

¿Te fue útil?

También podemos modificar el orden de las columnas mediante las clases .col-*-push-* y .col-*-pull-*. Por ejemplo, con .col-md-push-3 "empujaríamos" la columna 3 espacios hacia la derecha y con .col-md-pull-3 la empujaríamos 3 espacios hacia la izquierda. A continuación podemos ver un ejemplo:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

El cual quedaría de la forma:

Hay que tener cuidado con estas clases si hay un cambio de fila (debido a el número de columnas ocupe más de 12), en estos casos estas clases no funcionarán correctamente.

Si queremos restaurar la posición podemos utilizar el tamaño cero (0). Por ejemplo, si habíamos desplazado la columna hacia la derecha para tamaños de pantalla pequeños y queremos que no se aplique en tamaños de pantalla medianos y grandes podríamos utilizar la clase col-md-push-0.

Column ordering