スマホとPCで要素の順番を変更する方法

Web制作をしていると、PCだとこの順番のレイアウトでいいけれど、

スマホだとちょっと変えたほうがいいかも・・なんてことが

たまにあるかと思います。（少なくとも僕はありました）

そんな時、jQueryで簡単にその順番を変更することが可能ですので、ご紹介します。

jQueryを予めご用意の上、下に進みましょう。

beforeおよびafterメソッドを使う。

beforeメソッド

beforeメソッドはその名のとおり、入れ替えたい要素をその対象要素（引数）の前に持ってくるものです。

[javascript]
$(function(){
  $('#1').before($('#2'));
});
[/javascript]

これで#2が#1の前（上）に表示されるようになります。

afterメソッド

逆にafterメソッドは対象要素（引数）を入れ替えたい
要素の後ろに持ってくるものです。

[javascript]
$(function(){
  $('#2').after($('#1'));
});
[/javascript]

これも#2が#1の前（上）に表示されるようになります。

引数を複数設定する

[javascript]
$(function(){
  $('#2').after($('#1'),$('#3'),$('#5'),$('#4'),$('#6'));
});
[/javascript]

引数は複数設定することが可能です。

これで表示される順番は2,1,3,5,4,6となります。

ユーザーエージェントで条件分けする。

アクセスしたデバイスが
iPod,iPhone,Androidの場合といった
条件分岐を行い、上記を挿入すれば良いです。

[javascript]
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//ここに書いた処理はスマホやipadで閲覧時に有効となります。
}else{
//それ以外（PC）で閲覧時に有効となります。
}
[/javascript]

これらを組み合わせて書くと、
スマホでアクセスした場合と
PCでアクセスした場合の表示順を切り替えることが
可能になります。

デモページあります。

こちらにデモをご用意しましたので、
PCとスマホでそれぞれアクセスしてみてください。

https://r-labs.jp/demo/order-demo/demo1.html