ホームページ制作ツール〜CSS【スマホとPCで表示順を変えたい】

記事公開日：2017.10.18

ホームページ制作をする時、パソコンでもスマホでもホームページが見やすいようにレスポンシブで作っています。

画面サイズが変わる事でレイアウトが変わる事を「ブレイクポイント」と呼びます。
なんだかサーフィンする時の波が崩れる時のポイントみたいな名前ですねー。
恥ずかしながら、20代まではボディーボードが趣味で海によく通っていた事を思い出します。（下手でしたけど）
あんな大きいボードを担いで小田急線によく一人で乗れてたな、なんて懐かしい思い出話は置いといて。。。

パソコンで左右で並んだ内容をスマートフォンで見た時は前後に並ぶようにレイアウトするのですが、だいたいパソコンで左に配置したものがスマホでは上、パソコンで右に配置した内容がスマホでは下に並びます。

通常はブレイクするとそんなレイアウトになるのですが、パソコンでは右だけどスマホでは上に並べたい場合の方法を調べました。

いろいろ方法がありbootstrapの方法もありますがまだ勉強不足なので、今回は簡単なcssのみで行う方法です。

横幅959pixをブレイクポイントにした場合です。
htmlはそのまま、変更なしです！

今回参考にさせていただいたサイトです！ありがとうございます。
CSS flexの簡単な書き方 BOX表示順を自由に変更しよう