对于某些媒体查询，如何将右div向左和向左浮动到右div下方

Question

如何将div右移到左边和左边的div到右边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