要素の順番の入れ替え方法について【備忘録】

  • 2021年8月8日
  • css
css

HTMLの順番を入れ替えたい場合の備忘録です。

要素の順番の入れ替え方法について

縦組みの要素の入れ替えについて

時と場合によりますが、上下の順番を入れ替えたい場合があります。
PCとスマホで順番を入れ替えたい場合などですね。
縦と横で入れ替え方法が違うので、まずは縦から見ていきましょう。

例として、以下のような要素を入れ替えます。

1
2

上下方向の入れ替えの場合、display:gridを使用します。
それぞれの箱の親要素にgridとgrid-template-rowsを、
それぞれの箱にgrid-rowを設定します。

例えば親要素をparent、子要素をone、twoとする場合、HTMLとCSSの並びは以下のようになります。

以上を適用させると、結果は以下のようになります。

1
2

上下の順番を入れ替えることが出来ましたね。
display:gridの仕様については以下の記事で詳細に解説しているので、
こちらも参考にしてください。

関連記事

CSS3で登場したdisplay:gridについての備忘録です。 「display:grid」の使い方について 枠組みの作り方について 大枠に「display:grid」を指定することで、grid表示ができます。 gridは表組[…]

左右を入れ替える場合

さて、次は左右を入れ替える場合です。
こちらは上下を入れ替えるよりも簡単です。
そもそも、要素を左右に並べるには「display:flex」を使用します。

例えば以下のように左右に並べる場合、親要素に「display:flex」を指定すればOKです。

1
2

これで要素は横並びです。
ここから要素の順番を入れ替えるのは簡単です。

親要素に「flex-direction: row-reverse;」を指定してあげてください

それだけで、上記の結果は以下のようになります。

1
2

左右の順番が入れ替わったことが分かりますね。
簡単に実装できるので、縦方向、横方向、共に覚えておいてください。