Использование свойства flex order для переупорядочения элементов для рабочего стола и мобильных представлений
У меня есть 3 div внутри контейнера. Здесь нет вложенных элементов div.
Я использую Flex иorder имущество.
На мобильном это нормально сorder имущество.
Но на больших экранах это не получается.
Я не использовал контейнерный div для div 2 и 3, чтобы заказать их как 2,1,3 на мобильном телефоне.
ФАЙЛ HTML
<div class="container">
<div class="orange">1</div>
<div class="blue">2</div>
<div class="green">3</div>
</div>
CSS FILE
/*************** 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%;
}
}