CSS响应式设计顺序列

Question

好的,我有3列左侧浮动.现在当视口小于600px时,我希望第2列出现在第1列之前而不使用position:absolute.有没有办法只使用CSS和HTML来做到这一点？

如果没有,您也可以发布其他变种.

这是我的小提琴

Answer 1

这就是你追求的吗？http://jsfiddle.net/panchroma/dWJ9g/

您将看到我已经将HTML中的col1和col2重新排序并将边距应用于#col1和#col2

HTML

<div id="wrapper">
<div id="header">HEADER</div>
<div id="main">
     <div id="col2" class="cols">COL 2</div>
    <div id="col1" class="cols">COL 1</div>

    <div id="col3" class="cols">COL 3</div>
    <div class="clear"></div>
</div>
<div id="footer" class="clear">FOOTER</div>
</div>

CSS更改

#col1 {float:left; height:100px; width:200px; background:#cc4444;margin-left:-400px;}
#col2 {float:left; height:200px; width:200px; background:#44cc44;margin-left:200px;}  


@media only screen and (max-width:600px) {
#wrapper, #header, #main, #footer {width:100%;}
#col1, #col2, #col3 {float:none; width:100%;margin-left:0;}
}  

希望这可以帮助!