ウインドウサイズによる切り分けで、こんなレイアウトをCSSだけで実現できるのでしょうか？

Question

実現したいこと

ウインドウサイズによるメディアクエリの設定で、PCとスマホでレイアウトの切り替えをしたいのですが、PCでのレイアウトはクライアントの意向で決まっている状況です。PC画面は以下のようなレイアウト構成です。

スマホのウインドウサイズになった場合、以下のようにブロックの順番を実現したいのですが、CSSでこのようなレイアウトの組み替えは可能なのでしょうか？

発生している問題・分からないこと

スマホでの順番をcontent-a-a、content-b、content-a-b、の実現をしたいのですが、CSSだけで可能なものでしょうか？？

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

display:flex以外の方法で何か良い方法があったりするものでしょうか？

補足

特になし

Comments

[maisumakun]

モバイル版ではcontent-aはどこへ行くのですか？

[witoiw]

ご質問ありがとうございます。content-aはそのままあるのですが、content-aがあることでスマホでの理想の順番が実現できず、、困っています。図案が分かりにくくて、申し訳ございません。おっしゃる通り、content-aの存在が邪魔と言いますか、、、

[witoiw]

スマホの時だけ、content-aの存在を無効化させることってできるのでしょうか・・・。

[utm.]

メディアクエリを使えばグリッドレイアウトでできそうですがやってみないとなんともですね。
アクセシビリティの観点から言うと明らかに別の順序なので、あんまり良くないとも思いますし

Answer 1

モバイル時は、

• content-a に display: contents
• content-a-a に order: 1
• contnet-a-b に order: 3
• content-b に order: 2
• container に display: flex; flex-direction:column

で可能かと思います。

Comments

[witoiw]

ご回答ありがとうございます。え、こんな簡単に？？自分のCSSの理解が浅いことを知りました。。大変助かりました！ベストアンサーに選ばせていただきました。ありがとうございました！

Answer 2

解決したようですが参考までに

<style>
#container{
  background-Color:lightgray;
  display:grid;
  padding:10px;
  gap:10px;
}
#content-a  {background-Color:red;}
#content-a-a{background-Color:yellow;grid-area:aa;}
#content-a-b{background-Color:aqua;grid-area:ab;}
#content-b  {background-Color:lime;grid-area:b;}

@media screen and (min-width: 900px) {
  #container{ 
    grid-template-areas:
    "a b";
  }
  #content-a{
    padding:10px;
    gap:10px;
    display:grid;
    grid-template-areas:
    "aa"
    "ab";
    grid-area:a;
  }
}
@media screen and (max-width: 900px) {
  #container{ 
    grid-template-areas:
    "aa"
    "b"
    "ab"
    ;
  }
  #content-a{
    display: contents;
  }
}
</style>
<div id="container">
  <div id="content-a">
    <div id="content-a-a">content-a-a</div>
    <div id="content-a-b">content-a-b</div>
  </div>
  <div id="content-b">content-b</div>
</div>

Comments

[witoiw]

丁寧なご回答ありがとうございます。おかげで解決できました。ありがとうございます！！