Cambiar el padre de un elemento mediante media queries (más o menos)

En HTML los elementos se muestran en pantalla en el orden en el que aparecen en el código fuente. En este ejemplo:

<div class="grupo1">
<div class="e1g1">Elemento 1 grupo 1</div>
<div class="e2g1">Elemento 2 grupo 1</div>
</div>
<div class="grupo2">
<div class="e1g2">Elemento 1 grupo 2</div>
</div>

el grupo 1 se mostrará antes que el grupo 2.

Antes de que existieran CSS Flex y CSS Grid la única forma de poder alterar ese orden era meter en el código una copia del grupo 2 con otra clase y mediante media queries mostrar la copia y ocultar el original al cambiar de ancho. Funcionaba, pero no era demasiado elegante.

Gracias a la magia de CSS Flex y CSS Grid resulta muy sencillo invertir el orden en el que se muestran los bloques, y podemos incluso definirlo visualmente con las áreas de CSS Grid.

Sin embargo hay una cosa que aún no podemos hacer solo con CSS y para lo que necesitaremos JS (de ahí el más o menos del título). ¿Qué pasa si queremos que a partir de un cierto ancho el div con clase e1g2 pase a estar dentro de grupo1? Que yo sepa no existe forma de cambiar el padre de un elemento mediante CSS.

Para eso viene a nuestro rescate enquire.js. Nos permite definir funciones JS que se ejecutarán cuando se activen / desactiven las media queries que le pasemos. Para nuestro ejemplo el código sería:

enquire.register("screen and (max-width:950px)", {
match: () => {
let nuevoPadre = document.querySelector("grupo1");
let elementoAmover = document.querySelector("e1g2");
nuevoPadre.appendChild(elementoAmover);
},
unmatch: () => {
let nuevoPadre = document.querySelector("grupo2");
let elementoAmover = document.querySelector("e1g2");
nuevoPadre.appendChild(elementoAmover);
}
});

Usando la misma sintaxis de las media queries tenemos una forma sencilla de mover un elemento de su sitio original a otro sitio dentro del DOM. Por supuesto, mediante CSS podremos definir la posición exacta de ese elemento dentro de “su nueva casa”.

Y además conseguimos esta funcionalidad sin engordar demasiado, la librería solo ocupa 0.8kb una vez minimizada y comprimida.

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.