记录一下前端设置两个位于左右（上下）位置的div的手机端互换位置

现有两个位于左右（上下）位置的div，将手机端中他们互换位置

<div class="container">
   <div class="metro01"></div>
   <div class="metro02"></div>
</div>

只需设置：

@media only screen and (max-width: 768px) {
        .container{
            display: flex;
            flex-direction: column;
        }
        .metro1{
            order: 2;
        }
        .metro2{
            order: 1;
        }
    }