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

Web制作をしていると、PCだとこの順番のレイアウトでいいけれど、スマホだとちょっと変えたほうがいいかも・・なんてことがたまにあるかと思います。（少なくとも僕はありました）

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

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

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

beforeメソッド

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

$(function(){
  $('#1').before($('#2'));
});

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

afterメソッド

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

$(function(){
  $('#2').after($('#1'));
});

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

引数を複数設定する

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

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

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

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

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

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

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

デモページあります。

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

https://ideaideal.jp/demo/order-demo/demo1.html