[HTML,CSS]コンテンツの並び替えについて

Question

お世話になっております。
コンテンツの並び替えについてご質問させてください。

■やりたい事

<div id="container">
  <div class="contents1">
  </div>
  <div class="contents2">
  </div>
</div>

#container {
  display: flex;
  width: 1500px;
}
#container .contents1 {
  width: 50%;
　height: 500px;
  background-color: green;
}
#container .contents2 {
  width: 50%;
　height: 500px;
  background-color: black;
}

このように横並びで実装されているコンテンツをスマートフォンのレスポンシブ対応させる時
display:flexを解除して縦並びにさせているのですが、この際に通常contents1→contents2という並びを
contents2→contents1というふうに並び替えさせることは可能でしょうか？

初学者につき伝わりやすい文章で質問できているか心配ですが、宜しくお願い致します。
不明点がありましたら補足にて追記させていただきます。

Answer 1

要素が２つだけで逆順にしたいなら flex-direction: column-reverse; でもいいですね。

#container {
  display: flex;
  flex-direction: column-reverse;
  max-width: 1200px;
}

Comments

[joyboy]

回答いただきありがとうございます。
まさか一行のCSSを足すだけで実現できるとは、目から鱗です！
要素を逆順にする時は重宝させていただきます。

Answer 2

display:flexを解除して縦並びにさせている

解除せずに flex-direction: column; で縦並びにできます。

【flex-direction - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

その上で order で調節すればよいです。

【order - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/order

Comments

[joyboy]

回答いただきありがとうございます。
このやり方だと逆順に限らず、任意の並び順を指定できるので汎用性が高いですね！
勉強になりました。ありがとうございます！