スマホと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://r-labs.jp/demo/order-demo/demo1.html