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.