PC表示とスマホ表示でコンテンツの順番を入れ替えたい
レスポンシブページをつくっていると、「ウィンドウ幅によって表示順を変えたい！」というときがありませんか？
そんなときは、insetbeforeとinsetafterを使って要素の順番を入れ替えることができます！
insetbeforeの使い方
下記コードを例にすると、
|
1 2 |
<div class="news-content"></div> <div class="about-content"></div> |
当然ですが、この時の表示順はnews-content→about-contentの順です。
insetbeforeは、html上では後ろに書かれている要素を前に表示することができます。
|
1 2 3 4 5 |
<script type="text/javascript"> $(function(){ $(.about-content).insertBefore(.news-content); // $(この要素を).insertBefore(この要素の前に表示する); }); </script> |
こうすることで、about-content→news-contentの順に表示されるようになります。
insetafterの使い方
insetafterはinsetbeforeの逆で、html上では前に書かれている要素を後ろに表示することができます。
|
1 2 3 4 5 |
<script type="text/javascript"> $(function(){ $(.about-content).insertAfter(.news-content); //$(.この要素を).insertAfter(この要素の後ろに表示する); }); </script> |
表示順はnews-content→about-contentとなります。
ウィンドウ幅に応じて表示順を入れ替える
続いて、ウィンドウ幅（デバイス）によって順番を入れ替えます。
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(function(){ var window_w = $(window).width(); //閲覧しているブラウザ幅を取得 if(window_w < 1280){ $('.about-content').insertBefore('.news-content'); //ウインドウ幅が1280pxより小さいとき }else{ $('.about-content').insertAfter('.news-content'); //ウインドウ幅が1280pxよりも大きいとき } }); </script> |
これで、1280pxよりも横幅が小さいときには、htmlの記述とは逆の順番で表示することができます。
