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

css

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

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

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

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

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

上下方向の入れ替えの場合、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についての備忘録です。「display:grid」の使い方について枠組みの作り方について大枠に「display:grid」を指定することで、grid表示ができます。 gridは表組[…]

左右を入れ替える場合

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

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

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

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

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

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