Cambiar orden de columnas con Bootstrap – Vertegrande

Cambiar orden de columnas con Bootstrap

Con Bootstrap  podemos modificar el orden visual de las columnas mediante la clase .order-. Esta clase permite indicar la posición a la cual queremos desplazar la columna (del 1 al 12, por ejemplo .order-1, .order-2, etc.).


En ocasiones nos encontramos con la necesidad de personalizar ciertos proyectos que nos permiten descubrir nuevos tips, trucos o soluciones simples que posee  Bootstrap como framework.

Para un proyecto reciente nos encontramos con la necesidad de re-ordenar de diferentes maneras columnas dependiendo si navegaban en computadoras de escritorio o dispositivos móviles.

Con Bootstrap  podemos modificar el orden visual de las columnas mediante la clase .order- . Esta clase permite indicar la posición a la cual queremos desplazar la columna (del 1 al 12, por ejemplo .order-1, .order-2, etc.).

También podemos especificar el tamaño de pantalla para el que queremos que se aplique (por ejemplo .order-md-12). A continuación se incluye un ejemplo:

<div class="container">
  <div class="row">
    <div class="col">Primero, pero desordenado</div>
    <div class="col order-12">Segundo, pero último</div>
    <div class="col order-1">Tercero, pero primero</div>    <!-- ¡¡CUIDADO!! -->
  </div>
</div>

Resultado

Si nos fijamos en el resultado obtenido podemos ver que no se obtiene el resultado esperado, la tercera columna (en color rojo) aparece en la segunda posición en lugar de en la primera como se había indicado con «order-1«.

Esto es debido a un pequeño error al cambiar el orden de derecha izquierda. En los casos en los que simplemente queramos mover una columna hacia la derecha no se producirá este error, pero si queremos mover hacia la izquierda será necesario que establezcamos el order de todas las columnas. Por lo tanto, para que funcione correctamente el ejemplo anterior tendríamos que escribir el siguiente código:

<div class="container">
  <div class="row">
    <div class="col order-2">Primera, pero desordenada </div>   <!-- Añadimos el orden de esta columna -->
    <div class="col order-12">Segundo, pero último</div>
    <div class="col order-1">Tercero, pero primero</div>
  </div>
</div>

Ahora sí, el resultado esperado:

Como se puede ver también en este ejemplo, no es necesario que los números de columna para la ordenación sean consecutivos, simplemente se ordenarán de mayor a menor.

Hay que tener cuidado con estas clases si hay un salto de línea dentro de una misma fila (debido a que el número de columnas ocupe más de 12), ya que en estos casos el orden no funcionarán correctamente.

También disponemos de la clase «.order-first«, la cual nos permitirá situar cualquier elemento en primer lugar. Además, esta clase sí que funciona aunque haya un salto de línea.

Recordar:  Los cols se pueden ordenar de order-1order-12, de manera receptiva como order-md-12 order-2(último en md, segundo en  xs ) en relación con el padre .row.

Mas info de referencia