html - 列の CSS レスポンシブ デザインの順序

Question

OK、左に 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;}
}  

お役に立てれば！

Answer 2

マークアップを変更したくない場合は、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;
}

Answer 3

これを試して

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