Uso de la propiedad de pedido flexible para reorganizar elementos para vistas de escritorio y móviles
Tengo 3 divs dentro de un contenedor. No hay divs anidados.
Estoy usando flex yorder propiedad.
En dispositivos móviles, está bien conorder propiedad.
Pero en pantallas más grandes falla.
No utilicé un contenedor div para los divs 2 y 3 para ordenarlos como 2,1,3 en dispositivos móviles.
ARCHIVO HTML
<div class="container">
<div class="orange">1</div>
<div class="blue">2</div>
<div class="green">3</div>
</div>
ARCHIVO CSS
/*************** MOBILE *************/
.container
{
display: flex;
flex-wrap: wrap;
}
div.blue
{
order:1;
width: 100%;
}
div.orange
{
order:2;
width: 100%;
}
div.green
{
order:3;
width: 100%;
}
/***************************/
@media screen and (min-width:1200px)
{
.container
{
justify-content: space-between;
}
div.blue
{
order:2;
width: 36%;
}
div.orange
{
order:1;
width: 60%;
}
div.green
{
order:3;
width: 36%;
}
}