ウィンドウの幅に基づいてHTMLを再構成する

Question

基本的には、ウィンドウが小さくなるとHTML構造を再構成して、幅が400ピクセルと言うことができます。ユーザーがwitdhに400ピクセル以下の彼/彼女のブラウザのサイズを変更した後

<div id="mainContainer"> 
    <div id="div1"> -- Loads of content here -- </div> 
    <div id="div2"> -- Even more content here -- </div> 
    <div id="div3"> -- You can't even imagine how much content here -- </div> 
</div> 

は今、私いくつかの方法をDIV1の上DIV3を移動する必要があり、その構造は次のようになります。

私は既に持っている

<div id="mainContainer"> 
    <div id="div3"> -- You can't even imagine how much content here -- </div>   
    <div id="div1"> -- Loads of content here -- </div> 
    <div id="div2"> -- Even more content here -- </div> 
</div> 

、ウィンドウの幅を測定する関数jqueryを使用します。しかし、私はどのように残りの部分を達成するのですか？私はthis sort of similar questionでちょっと見てきましたが、どうすればいいか分かりましたが、静かではありませんでした。

提案がありますか？

Answer 1

http://jsfiddle.net/tMutA/1/

あなたは多分代わりに別のサイズに索引パラメータのセットを定義して、代わりにSORTBYを実行する必要があります。

var screenWidth = $(window).width(); 

if(screenWidth < 600) { 
    $('#div3').prependTo($('#mainContainer')); 
} 

$(window).resize(function() { 
var screenWidth = $(window).width(); 

if(screenWidth < 600) { 
    $('#div3').prependTo($('#mainContainer')); 
} else { 
    $('#div2').prependTo($('#mainContainer')); 
    $('#div1').prependTo($('#mainContainer')); 
} 

}); 

Answer 2

CSS Media Queriesを使用して画面幅を照会し、それに応じて調整する必要があります。

すべてのブラウザでサポートされているわけではありません。

Another great article.