PC版とSP版（スマホ版）のデザインが異なるサイト、よく見かけますよね。当社のサイトももちろんそうなっています。
株式会社Sekappy
https://sekappy.com/
これは主にCSSを用いて、画面幅の変化に応じてデザインが切り替わるように制御しています。
昔はSP版のサイトを別サイトで用意するような実装も多かったです（ニコニコ動画等で確認できます）が、現在は保守性の高さ等の理由から、CSSを用いた制御が主になっています。
メディアクエリとブレイクポイント
CSSによる画面幅の検知は、メディアクエリを用いてブレイクポイントと呼ばれるものを作ることで実現できます。
See the Pen change-color by SekappyOfficial (@Sekappy) on CodePen.
※実際にブラウザのサイズを変更して、動作を確認してください。今回のメインでは無いので掘り下げませんが、メディアクエリには様々なものがあります。
うまく利用することによって、様々な制御が実現できるので、是非調べてみてください。
メディアクエリーの基本 – ウェブ開発の学習 | MDN
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries
flexboxを使ったコンテンツの並べ替え
本題です。
デザインを適用する際に、PC版とSP版で大きくコンテンツ順序が異なるデザインの実装を要求されて頭を抱えたことはないでしょうか。
例えば以下の画像のような実装を行いたいとします。
・PC版
・SP版
・PCで見たときはコンテンツは横並び、かつ１２３４５の順に並んでいる
・SPで見たときはコンテンツは縦並び、かつ５３１２４の順に並んでいる
実装は以下の様になります。
See the Pen sample1 by SekappyOfficial (@Sekappy) on CodePen.
※実際にブラウザのサイズを変更して、動作を確認してください。flexアイテムにorderを指定すると、flexコンテナ内で順番を自由に並べ替えることが出来ます。こちらは簡単で、非常に強力です。
PC、SP共に単純なレイアウトで、コンテンツの順番のみ入れ替えれば済むようなデザインで威力を発揮します。
gridを使ったコンテンツの並べ替え
以下の画像のような実装を行いたいとします。
・PC版
・SP版
・PCで見たときは１が左カラム的に存在、かつ２３４５が右カラムに並んでいる
・SPで見たときはコンテンツは全て縦並び、かつ５３１２４の順に並んでいる
実装は以下の様になります。
See the Pen sample2 by SekappyOfficial (@Sekappy) on CodePen.
※実際にブラウザのサイズを変更して、動作を確認してください。格子状（grid）に区切られたエリア内で、自由自在にコンテンツを配置できるのがグリッドレイアウトです。
CSSのみで対象のオブジェクトを任意の位置に配置できるので、メディアクエリを併せて使用することでいくらでも並び替えや配置変更が出来てしまうので、非常に強力です。
慣れるまで少し可読性が低いのが難点でしょうか。
position:absoluteなどで強制的に飛ばす
古の手法ですが、未だに有効な場面もあります。
ナビゲーションメニューなどを画面上部に持っていく際などによく使用されます。
・PC版
・SP版
See the Pen sample3 by SekappyOfficial (@Sekappy) on CodePen.
※実際にブラウザのサイズを変更して、動作を確認してください。まとめ
特にgridがCSS3で実装されたことにより、CSSで表現できないデザインは殆ど無くなってきたように思えます。PCとSP版両方のデザインを無理なく両立するため、少し頭をひねってHTMLやCSSを書いていく必要がありますが、パズルを解いているような楽しさもあります。
是非チャレンジしてみてください。