css - 对于某些媒体查询，如何将右侧 div float 到左侧，将左侧 div float 到右侧 div 下方

Question

对于某些媒体查询，如何将右侧的 div float 到左侧，将左侧的 div float 到右侧的 div 下方

/* HTML*/
<div class="pwrp">
<div class="lcol">
 left column
</div>
<div class ="rcol">
right column
</div>   
</div>
 /*CSS */  
.pwrp { width:500px;}
.lcol { width :250px; background-color:red;float: left }
.rcol{ width:250px; background-color:pink;float:right}
@media screen and (max-width: 400px) {
.pwrp { width :300px;}
.lcol { float:left;}
.rcol { float:none;}
 }
 jsfiddle link :[link1][1]
http://jsfiddle.net/jimoscarlobo/hgh603mv/2/

Answer 1

试试这个-

@media screen and (max-width: 400px) {
    .pwrp{ 
       width :300px;
       display: flex;
       flex-flow: row wrap;
    }
    .lcol{
       float:left;
       order: 2;
    }
    .rcol{ 
       float:right;
       order: 1;
    }
}

编辑:

我已经更新了你的 fiddle