レスポンシブ時にコンテンツの順序が入れ替わるレイアウト (grid)

[ ID : 1092 ]
レスポンシブ時にコンテンツの順序が入れ替わるレイアウト (grid)

概要

レスポンシブの際に順序が入れ替わる (htmlの記述順がことなってしまう)レイアウトをcssを使って実装する方法を紹介。

用途

  • HTMLの記述順に依存せず任意の箇所に表示させるレイアウト。

    • PCでは左に画像、右に見出しとコンテンツ。
    • SPでは上から見出し、画像、コンテンツの順番。
  • display:grid を使用。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)
  • IE11

実装方法

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録