要素の順序を入れ替えたレイアウト（レスポンシブ）を実現したい

シンプルに実現できそうな気がするのに、答えに辿り着けない状況となっています。
お助け頂けるとありがたいですよろしくお願い致します。

実現したいこと

レスポンシブcssで、画像のようにレイアウトしたいです。
各要素は幅・高さ共に可変です。

試したこと

html
1<div class="wrap">
2	<div class="要素A">
3		内容
4	</div>
5	<div class="要素B">
6		内容
7	</div>
8	<div class="要素C">
9		内容
10	</div>
11	<div class="要素D">
12		内容
13	</div>
14</div>

css
1/* モバイル */
2
3.wrap {
4    flex-wrap: wrap;
5    -ms-flex-wrap: wrap;
6    -webkit-flex-wrap: wrap;
7    -webkit-box-pack: justify;
8    -ms-flex-pack: justify;
9    -webkit-justify-content: space-between;
10    justify-content: space-between;
11}
12.wrap div {
13	width: 100%;
14	margin-bottom: 10px;
15}
16.要素A {
17	order: 1;
18}
19.要素B {
20	order: 2;
21}
22.要素C {
23	order: 4;
24}
25.要素D {
26	order: 3;
27}
28
29
30/* PC */
31
32@media screen and (min-width: 768px) {
33
34	.wrap {
35		position: relative;
36	}
37	.要素A {
38		width: 100%;
39		order: 1;
40	}
41	.要素B {
42		width: 70%;
43		order: 2;
44	}
45	.要素C {
46		width: 70%;
47		order: 3;
48	}
49	.要素D {
50		width: 30%;
51		order: 4;
52		position: absolute;
53		top: calc( 要素Aの高さ + 10px );
54		right: 0;
55	}
56	
57}

orderで順番を入れ替えるだけだと
PCレイアウトの際に「要素D」の頭が「要素C」と揃ってしまう為、
position:absolute;で「要素B」と同じ高さまで持ち上げました。

問題点

上記の方法だと、(要素Bの高さ + 要素Cの高さ) < (要素Dの高さ)の場合に
要素Dが収まりきらず、親要素「wrap」からはみ出してしまいます。

ここでjavascriptを用いて高さの比較をして、大きい方の値を親要素に設定して、、とも思ったのですが
本当にその方法しか無いのか、もっとシンプルな方法があるのでは？
と感じたものの思いつかず、相談させて頂いた次第です。

アドバイス頂ければ幸いです。よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS Flexbox では難しそうですね。
CSS Grid を使えばどうでしょうか。

CSS Grid Layout を極める！（基礎編） - Qiita

投稿2020/04/05 08:23

hatena19

総合スコア34075

t8pda

2020/04/05 08:46

大変わかりやすい解説ページをご紹介頂きありがとうございます！勝手にテーブルのような碁盤の目に当てはめるだけのものと思い込んでいましたが、想像よりずっと設定が柔軟で、今回の希望のレイアウトに活用できそうです。不勉強なご相談をしてしまい恐縮ですが、これを機にGridをしっかり勉強しようと思いますありがとうございました！

行動規範の内容に同意します