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

Question

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

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

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

<div class="section top">
   <div class="container">
     <div class="row top-flex-cont">
       <div class="one-half column div1">
        <img class="phone" src="images/iphone_free.png">
       </div>
       <div class="one-half column div2">
         <div class="div3"><img class="top-logo" src="images/sample.png"></div>
         <div class="top-headding div4"><h4>ヘッダーコピー</h4></div>
         <div class="row div6">
           <div class="one-half column div5">
             <a href="#" class="custom-button">利用はこちらから</a>
           </div>
           <div class="one-half column top-sumaho">
             <img class="qr" src="images/qr_sample.png">
             <div>スマホはこちら</div>
           </div>
         </div>
       </div>
      </div>
    </div>
  </div>

Answer 1

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

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

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

Comments

[masaakitsuyoshi]

>>.いわゆるレスポンシブでの「禁忌」ってやつですね
そうなんですね。基本的事項を把握しておりませんでした。。。

>>１．一部のボックスを重複して記述しておき、メディアクエリで表示／非表示を切り替える
>>2.JSを使って動的にHTMLコードを書き換える
1は自分も考えていましたが、flexboxなどでよりスマートに実装できる方法を探しておりました。使えないのが残念です。

または、positionで場所指定する、というのも考えたのですがどうでしょうか？

[aKusano]

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

[masaakitsuyoshi]

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

Answer 2

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

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

Comments

[masaakitsuyoshi]

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

[NatsumiOki]

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

[masaakitsuyoshi]

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

[masaakitsuyoshi]

Skeletonを利用していたためある程度自動的にレスポンシブになっていたので、そちらをそのまま利用することにしました。

div3
div4
div5
div1

という形

目的のレイアウトではないですが、そこまで意味も変わらないので、良いかなと。

Answer 3

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

~780px
2
1
3
4

780px~
1
2
34

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

<script>
    $(function(){
        //window幅を取得
        var win = $(window).width()
        //window幅が780px以下の場合
        if(win <= 780) {
            //class="one"の内容を取得
            var one = $(".one").html()
            //class="one"を隠す
            $(".one").hide();
            //class="two"の後ろにclass="one"を入れる
            $(".two").after("<div class='one'>"+one+"</div>")
            //class="box_flex"のflexを解除
            $(".box_flex").css("display","block")
        }
    });
</script>

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

Comments

[masaakitsuyoshi]

はじめまして。
JSはまだ使い慣れていませんが参考にさせていただきます。

[MaShiRo_H]

慣れると便利なので、ぜひぜひ♪