レスポンシブ時入れ子のdivを好きな順序に入れ替えるには？

780px以上ではこのように表示されている入れ子のdivを
デスクトップ780px~

このように好きな順序に変えて表示させたい
div3が上に、div4・５が下にいき、div１を挟む形です。
モバイル 380px~

flexboxで、div1とdiv2を入れ替えることはできたんですが、入れ子になっているdiv2をどう扱えばよいかがわかりません。
もしくはflexbox以外の方法のほうがスマートでしょうか？

html
1<div class="section top">
2   <div class="container">
3     <div class="row top-flex-cont">
4       <div class="one-half column div1">
5        <img class="phone" src="images/iphone_free.png">
6       </div>
7       <div class="one-half column div2">
8         <div class="div3"><img class="top-logo" src="images/sample.png"></div>
9         <div class="top-headding div4"><h4>ヘッダーコピー</h4></div>
10         <div class="row div6">
11           <div class="one-half column div5">
12             <a href="#" class="custom-button">利用はこちらから</a>
13           </div>
14           <div class="one-half column top-sumaho">
15             <img class="qr" src="images/qr_sample.png">
16             <div>スマホはこちら</div>
17           </div>
18         </div>
19       </div>
20      </div>
21    </div>
22  </div>

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

回答3件

私の知る限り、今回のようにグルーピングが変わってしまうような状態でのレイアウト変更は、
たとえflexboxでもCSSだけでは実現不可能です。（いわゆるレスポンシブでの「禁忌」ってやつですね）
どうしても実現したければ、

１．一部のボックスを重複して記述しておき、メディアクエリで表示／非表示を切り替える
2.JSを使って動的にHTMLコードを書き換える

のどちらかの手法に頼ることになるかと思われます。

投稿2016/08/29 09:55

aKusano

総合スコア3763

masaakitsuyoshi

2016/08/30 02:25

>>.いわゆるレスポンシブでの「禁忌」ってやつですねそうなんですね。基本的事項を把握しておりませんでした。。。 >>１．一部のボックスを重複して記述しておき、メディアクエリで表示／非表示を切り替える >>2.JSを使って動的にHTMLコードを書き換える 1は自分も考えていましたが、flexboxなどでよりスマートに実装できる方法を探しておりました。使えないのが残念です。または、positionで場所指定する、というのも考えたのですがどうでしょうか？

aKusano

2016/08/30 03:41

高さの変動が無い領域であれば、positionで場所指定するのも有りかと思います。コンテンツが増減する、幅可変に伴い領域の高さが変動するなどの場合、後続のコンテンツに被ってしまったり、無駄に余白が空いたりする恐れが高くなりますので、やはりJS併用で高さの動的な変更処理が必要となるものと思われます。

masaakitsuyoshi

2016/08/30 05:54

＞＞後続のコンテンツに被ってしまったり、そうなんです。ちょっとやってみたんですが、重なってしまって目指すレイアウトにするのが難しそうでした。 JS必要なのですね。

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

ベストアンサー

むしろ最初からdiv1はdiv2の中に入れておき、PCのときに左に配置するような組み方に変えてみてはいかがでしょうか？
そのほうが自由度が高いような気がします。

【追記】
説明がわかりづらかったようなのでサンプルを作りました。
http://codepen.io/mayo31/pen/vXBOOZ

投稿2016/08/29 07:35

編集2016/08/30 01:23

NatsumiOki

総合スコア1298

masaakitsuyoshi

2016/08/29 09:06

失礼しました。すでにdiv7の中にdiv1とdiv2を入れている状況でした。

NatsumiOki

2016/08/30 01:01

いえ、div1をdiv3とdiv6の間（div2の中）に入れておくのです。モバイル版の並びをデフォルトのソースにするという意味です。モバイル版ではすべてdisplay:block;で、PC版のときにレイアウトを変えるということです。

masaakitsuyoshi

2016/08/30 02:32

なるほど！モバイルの時に動きを変えるのではなく、逆にPC版のときにレイアウトを変えるという発想でしたか。コード非常にわかりやすく参考になります。出来そうなのでやってみます。

masaakitsuyoshi

2016/08/30 05:59

Skeletonを利用していたためある程度自動的にレスポンシブになっていたので、そちらをそのまま利用することにしました。 div3 div4 div5 div1 という形目的のレイアウトではないですが、そこまで意味も変わらないので、良いかなと。

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

はじめまして！
windowの幅を取得し、それが780px以下の時に【1】の内容を【2】の後に表示させ、
【3】と【4】を囲う要素のflexを解除しています。

~780px
2
1
3
4

780px~
1
2
34

JSとCSSのflexboxを駆使すれば実現不可ではないと思いますので、ご参考までにm(_ _)m

Javascript
1<script>
2    $(function(){
3        //window幅を取得
4        var win = $(window).width()
5        //window幅が780px以下の場合
6        if(win <= 780) {
7            //class="one"の内容を取得
8            var one = $(".one").html()
9            //class="one"を隠す
10            $(".one").hide();
11            //class="two"の後ろにclass="one"を入れる
12            $(".two").after("<div class='one'>"+one+"</div>")
13            //class="box_flex"のflexを解除
14            $(".box_flex").css("display","block")
15        }
16    });
17</script>

HTML
1<div class="one">1</div>
2<div class="box">
3    <div class="two">2</div>
4    <div class="box_flex" style="display:flex">
5        <div class="three">3</div>
6        <div class="four">4</div>
7    </div>
8</div>