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.