使用弹性订单属性重新排列桌面和移动视图的项目

Question

使用弹性订单属性重新排列桌面和移动视图的项目

我在容器内有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%;}}