シンプルに実現できそうな気がするのに、答えに辿り着けない状況となっています。お助け頂けるとありがたいですよろしくお願い致します。 ### 実現したいこと ![希望レイアウト](0ae2581815dcef5ca7919cf71e64ed5f.gif) レスポンシブcssで、画像のようにレイアウトしたいです。各要素は幅・高さ共に可変です。 ### 試したこと ```html

内容

``` ```css /* モバイル */ .wrap { flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .wrap div { width: 100%; margin-bottom: 10px; } .要素A { order: 1; } .要素B { order: 2; } .要素C { order: 4; } .要素D { order: 3; } /* PC */ @media screen and (min-width: 768px) { .wrap { position: relative; } .要素A { width: 100%; order: 1; } .要素B { width: 70%; order: 2; } .要素C { width: 70%; order: 3; } .要素D { width: 30%; order: 4; position: absolute; top: calc( 要素Aの高さ + 10px ); right: 0; } } ``` orderで順番を入れ替えるだけだと PCレイアウトの際に「要素D」の頭が「要素C」と揃ってしまう為、 position:absolute;で「要素B」と同じ高さまで持ち上げました。 ### 問題点上記の方法だと、(要素Bの高さ + 要素Cの高さ) < (要素Dの高さ)の場合に要素Dが収まりきらず、親要素「wrap」からはみ出してしまいます。ここでjavascriptを用いて高さの比較をして、大きい方の値を親要素に設定して、、とも思ったのですが本当にその方法しか無いのか、もっとシンプルな方法があるのでは？と感じたものの思いつかず、相談させて頂いた次第です。アドバイス頂ければ幸いです。よろしくお願い致します。

	@@ -1 +1 @@
1	- 希望のレイアウトを~~cssで~~実現したい
1	+ 要素の順序を入れ替えたレイアウト（レスポンシブ）を実現したい

質問編集履歴