概要
レスポンシブの際に順序が入れ替わる (htmlの記述順がことなってしまう)レイアウトをcssを使って実装する方法を紹介。用途
-
HTMLの記述順に依存せず任意の箇所に表示させるレイアウト。
- PCでは左に画像、右に見出しとコンテンツ。
- SPでは上から見出し、画像、コンテンツの順番。
- display:grid を使用。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
実装方法
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)