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

css

HTMLの順番を入れ替えたい場合の方法についてまとめました。
縦方向、横方向、ともにCSSのみで実現可能です。

まずは上下の順番の入れ替えからです。PCとスマホで順番を入れ替えたい場合などですね。

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

上下方向の入れ替えの場合、CSSのdisplayプロパティのgridキーワードを使用します。
それぞれの箱の親要素にgridとgrid-template-rowsを、それぞれの箱にgrid-rowを設定します。

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

<div class="parent">
<div class="one">1</div>
<div class="two">2</div>
</div>

</div>

div.parent{
  display:grid;
  gid-template-rows:50% 50%;
}

div.one{
  grid-row:2/3;
}

div.two{
  grid-row:1/2;
}

div.parent{

display:grid;

gid-template-rows:50% 50%;

}

div.one{

grid-row:2/3;

}

div.two{

grid-row:1/2;

}

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

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

CSS3で登場したdisplay要素の新キーワードgridについてのまとめです。【CSS】display要素のgridキーワードの使い方まずは基本となる、grid（枠組み）の作り方について大枠に「display:grid」を指定[…]

さて、次は左右を入れ替える場合です。
こちらは上下を入れ替えるよりも簡単です。

そもそも、要素を左右に並べるには「display:flex」を使用することが多いですよね。

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

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

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

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

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