CSS響應式設計順序排列

Question

好吧，我有3列向左浮動。現在，當視口小於600像素時，我希望第2列出現在第1列之前，而不使用position:absolute。有沒有辦法通過使用CSS和HTML來做到這一點？

如果沒有，您還可以發佈其他變種。

Here's my fiddle

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;} 
} 

希望這會有所幫助！

Answer 2

試試這個

http://jsfiddle.net/mKbnH/2/

CSS

html * {margin:0; padding:0;} 
body {background:#000; font-family:helvetica, verdana;} 
#wrapper {margin:50px auto;} 
#wrapper, #header, #main, #footer {width:600px;} 
#header {height:100px; background:#cccc44;} 
#main {} 
#col1 {float:left; height:100px; width:200px; background:#cc4444;} 
#col2 {float:left; height:200px; width:200px; background:#44cc44;} 
#col3 {float:left; height:150px; width:200px; background:#4444cc;} 
#footer {height:50px; background:#cc44cc;} 

.cols {} 
.clear {clear:both;} 

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

Answer 3

如果你不想改變標記，我會建議使用JavaScript來改變HTML和ID。

http://jsfiddle.net/FBAtT/

var col1 = document.getElementById('col1'), 
    col2 = document.getElementById('col2'), 
    swapped = false; 

window.onresize = function() { 
    var width = window.innerWidth; 
    if (width < 600 && swapped === false) { 
     swapCols(); 
     swapped = true; 
    } else if (width > 600 && swapped === true) { 
     swapCols(); 
     swapped = false; 
    } 
}; 

function swapCols() { 
    var _col1 = col1.innerHTML, 
     _col1id = col1.id, 
     _col2 = col2.innerHTML, 
     _col2id = col2.id; 
    col1.innerHTML = _col2; 
    col1.id = _col2id; 
    col2.innerHTML = _col1; 
    col2.id = _col1id; 
}