Mi proyecto usa Tailwind + Vue 2. Estoy usando Vue para recorrer una lista y mostrar varias filas. Cada fila comienza colapsada y tiene la opción de expandirse.

Hay 3 elementos div visibles y 1 oculto en cada fila contraída. Cuando se expande, el div oculto se hace visible. Estoy buscando tomar 2 de los elementos div visibles de cada fila y moverlos al div desplegable oculto cuando estoy en el móvil. Cuando se expande en el móvil, espero que los elementos movidos sean visibles. También quiero que retrocedan cuando cambien de la vista móvil a la de escritorio.

El comportamiento esperado es el siguiente:

• En el escritorio, contraído, se muestran el interruptor de palanca y el mensaje.

• En el escritorio, expandido, se muestran el interruptor de palanca y el mensaje, no cambia de ubicación.

• En dispositivos móviles, colapsado, el interruptor de palanca y el mensaje NO se muestran y, en su lugar, se mueven al div colapsado (oculto).

• En dispositivos móviles, se muestra el interruptor y el mensaje expandidos.

Esta foto demuestra lo que estoy buscando lograr.

Estos han sido mis intentos hasta ahora:

1. CSS / Duplicar : duplica el elemento. Haga que uno esté oculto en el móvil y visible en el escritorio, y el otro sea visible en el móvil y oculto en el escritorio. Aunque no es una forma limpia de hacer esto, parece funcionar, hasta que uso el interruptor de palanca. Pierde funcionalidad (supongo que ya que se repite).
2. Tailwind/CSS order : como sugiere el nombre de la utilidad, el orden en la página cambiará, pero esto no moverá los elementos deseados a un elemento oculto; más bien muévalo arriba/abajo del elemento oculto.
3. Vue Teleport : esto es para Vue 3, pero hay paquetes disponibles para Vue 2, como portal-vue . Lo probé, y dado que las filas se iteran, todos los elementos terminan empujados en la vista ampliada de la última fila. Preferiría no usar un paquete.
4. Javascript : similar a teleport/portal: etiquete divs "move-from" y "move-to" y encuéntrelos con getElementsByClassName . Iterar a través de cada etiqueta dropdown y move-me (hay 2 etiquetas move-me para cada etiqueta dropdown ). Agregue un detector de eventos para cambiar el tamaño de la ventana y verifique si el ancho de la página es < 768. El problema con esto es que, como el teletransporte/portal, también incluye todos los elementos en la vista ampliada de la última fila.

 if (this.width < 768) { const moveMeParent = document.getElementsByClassName('move-me') // there are 20 of these const dropdownParent = document.getElementsByClassName('dropdown') // there are 10 of these for (let i = 0; i < dropdownParent.length; i++) { for (let j = 0; j < 2; j++) { dropdownParent[i].appendChild(moveMeParent[0]) } } }