A menudo necesitamos recolocar ciertos elementos de la interfaz en función del espacio disponible. Existen muchas maneras de abordar estas situaciones, algunas pasan por modificar el DOM con JavaScript, jQuery... En nuestro caso vamos a reordenar DIVs (visualmente) con Flexbox, sin necesidad de alterar el DOM.

Si aun no conoces Flexbox, aquí tienes una definición de Flexbox.

El HTML que va dentro del <body> de nuestro ejemplo es muy sencillo:

Creamos un DIV que va a contener nueve ‘cajas’.  Este DIV tiene aplicada la clase ‘contenedor‘:

Todas nuestras cajas tienen casi todo en común. Por eso les aplicamos la clase genérica ‘caja‘ :

Luego cada caja tiene su propio color único, que obtiene de estas clases:

Para definir el orden inicial que tendrán nuestras nueve cajas, usamos este código CSS:

Como ves, estamos asignando a cada “DIV hijo” del DIV “contenedor” un número único que servirá para controlar su orden de aparición respecto a los demás.

¡Ahora viene lo interesante! Creamos una media querie (para un ancho de 768px) en la que redefinimos el orden de colocación de las cajas:

Abre el ejemplo y reduce el ancho de tu navegador a menos de 768px para ver el efecto.
Fíjate que también estamos  alterando así la clase ‘contenedor‘:

Para completar el ejemplo, creamos otra media querie para anchos inferiores a 480px:

Y esto es todo,  fácil ¿no?
Si quieres, puedes revisar todo el código fuente del ejemplo.

Espero que te haya sido de ayuda este minitutorial 😀

 

Share:Tweet about this on TwitterShare on FacebookShare on Google+