小编ART*_*yet的帖子

我在容器内有3个div.没有嵌套的div.

我正在使用flex和orderproperty.

在移动设备上,可以使用order房产.

但是在较大的屏幕上它失败了.

我没有为div 2和3使用容器div,以便在移动设备上将它们命令为2,1,3.

HTML文件

<div class="container">
<div class="orange">1</div>
<div class="blue">2</div>
<div class="green">3</div>
</div>

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%;
}
}