Usando a propriedade flex order para reorganizar itens para visualizações em computadores e dispositivos móveis
Eu tenho 3 divs dentro de um contêiner. Não há divs aninhados.
Estou usando flex eorder propriedade.
No celular, está tudo bem comorder propriedade.
Mas em telas maiores, falha.
Eu não usei uma div de contêiner para as divs 2 e 3 para ordená-las como 2,1,3 no celular.
ARQUIVO HTML
<div class="container">
<div class="orange">1</div>
<div class="blue">2</div>
<div class="green">3</div>
</div>
ARQUIVO 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%;
}
}