Tengo un contenedor flexible con dirección flexible: fila y n elementos, no tienen altura o ancho fijos. En el escritorio, muestro 2 columnas con un orden exacto. En el móvil es una columna pero el orden no es el que quiero. Básicamente, quiero mostrar los elementos de la segunda columna después de los elementos de la primera columna. ¿Cómo reordenarlos para lograr el resultado deseado? Aquí hay un ejemplo.
En escritorio dos columnas
item1 item2 item3 item4 item5 item6Resultado deseado con una columna
item1 item3 item5 item2 item4 item6Aquí hay un html y css
.container { display: flex; flex-wrap: wrap; } .item { flex: 1 0 50%; } @media only screen and (max-width: 520px) { .item { flex: 100%; } } <div class="container"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> <div class="item">item5</div> <div class="item">item6</div> </div>Puedes usar flex y order para eso:
.container { display: flex; flex-wrap: wrap; width: 100%; } .item { width: 50%; padding-bottom: 20px; } @media screen and (max-width: 800px) { .container { flex-direction: column; } .item { width: 100%; } .item3 { order: 2; } .item5 { order: 3; } .item2 { order: 4; } .item4 { order: 5; } .item6 { order: 6; } } <div class="container"> <div class="item item1">item1</div> <div class="item item2">item2</div> <div class="item item3">item3</div> <div class="item item4">item4</div> <div class="item item5">item5</div> <div class="item item6">item6</div> </div>Solo agrega esto
.item:nth-child(2n - 1) { order: -1; } .container { display: flex; flex-wrap: wrap; } .item { flex: 1 0 50%; } @media only screen and (max-width: 520px) { .item { flex: 100%; } .item:nth-child(2n - 1) { order: -1; } } <div class="container"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> <div class="item">item5</div> <div class="item">item6</div> </div>Puede usar la propiedad order con flexbox. Aquí está el recurso => https://developer.mozilla.org/en-US/docs/Web/CSS/order
@media (max-width: 520px) { .item:nth-child(1) { order: 1; } .item:nth-child(2) { order: 4; } .item:nth-child(3) { order: 2; } .item:nth-child(4) { order: 5; } .item:nth-child(5) { order: 3; } .item:nth-child(6) { order: 6; } }