Tengo una lista desordenada como esta:
<ul> <li>Artículo 1</li> <li>Artículo 2</li> <li>Artículo 3</li> <li>Artículo 4</li> </ul>
Me gustaría que el primer elemento de la lista se mueva automáticamente al último cuando se navegue por el sitio web en la vista de pantalla de tableta/móvil, y se mueva automáticamente de nuevo a la parte superior cuando vuelva a cambiar a la vista de pantalla de escritorio, es decir, receptivo. La salida en la vista de pantalla de tableta/móvil debería ser así:
<ul> <li>Artículo 2</li> <li>Artículo 3</li> <li>Artículo 4</li> <li>Artículo 1</li> </ul>
¿Puedo saber si esto se puede lograr usando JavaScript/CSS? Gracias.
Use propiedades de orden para lograr esto
@media(max-width: 991px){ /*you can change width according to your requirement*/ ul { display: flex; flex-direction: column; } ul li:first-child { order: 4; } } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>