Tengo algunos div html y estilo css simple, algo como esto:
.wrap{ display: flex; flex-direction:row; justify-content: space-around; align-items: center; } .child{ width: 45px; height: 45px; border-radius: 50%; background-color: lightBlue; display:flex; justify-content: center; align-items: center; font-size: 20px; } <div class='wrap'> <div class='child'> 0 </div> <div class='child'> 1 </div> <div class='child'> 2 </div> <div class='child'> 3 </div> <div class='child'> 4 </div> <div class='child'> 5 </div> <div class='child'> 6 </div> <div class='child'> 7 </div> <div class='child'> 8 </div> <div class='child'> 9 </div> <div class='child'> 10 </div> </div>Me gustaría cambiar la posición de este elemento en el dispositivo móvil a algo como esto:
ingrese la descripción de la imagen aquí
¿Cómo puedo hacer esto? ¿Estaba pensando en primer lugar en flex-wrap y order?
Puedes hacerlo como a continuación:
.wrap { display: flex; flex-direction: row; flex-wrap:wrap; /* enable the wrap*/ justify-content:center; /* center everything */ } /* create a hidden element taking full width used to seperate our elements */ .wrap:before { content:""; flex-basis:100%; order:1 } /* put all even elements after the seperation to have a new row*/ .child:nth-child(even) { order:2; } .child { width: 45px; height: 45px; margin:5px; border-radius: 50%; background-color: lightBlue; display: flex; justify-content: center; align-items: center; font-size: 20px; } <div class='wrap'> <div class='child'> 0 </div> <div class='child'> 1 </div> <div class='child'> 2 </div> <div class='child'> 3 </div> <div class='child'> 4 </div> <div class='child'> 5 </div> <div class='child'> 6 </div> <div class='child'> 7 </div> <div class='child'> 8 </div> <div class='child'> 9 </div> <div class='child'> 10 </div> </div>display: flex de .wrap y proporcione .child display: inline-flexCSS será así _
.wrap{ text-align: center; } .child{ width: 45px; height: 45px; border-radius: 50%; background-color: lightBlue; display: inline-flex; justify-content: center; align-items: center; font-size: 20px; }