ブートストラップ4フロート付きフレックス

Question

このようなレイアウトをブートストラップ4フレックスグリッドでフロートするにはどうしたらいいですか？ I

はフレックス次関数でそれを試してみましたが、私の結果を見ると、問題

<div class="row align-items-start"> 

     <div class="col-sm-8 float-left" style="background: orange;order:1"> 
       <div class="white-container pt-5 pb-5"> 
        # LEFT 1 
       </div> 
      </div> 
      <div class="col-sm-4 float-right" style="background: pink;order:2"> 
       <div class="white-container pt-3 pb-3"> 
        # RIGHT 1 
       </div> 
      </div> 
      <div class="col-sm-4 float-right" style="background: grey;order:4"> 
       <div class="white-container pt-3 pb-3 "> 
        # RIGHT 2 
       </div> 
      </div> 
      <div class="col-sm-8 float-left" style="background: yellow;order:3"> 
       <div class="white-container pt-5 pb-5"> 
        # LEFT 2 
       </div> 
      </div> 
      <div class="col-sm-8 float-left" style="background: yellow;order:5"> 
       <div class="white-container pt-5 pb-5"> 
        LEFT 3 
       </div> 
      </div> 
      <div class="col-sm-4 float-right" style="background: grey;order:6"> 
       <div class="white-container pt-3 pb-3"> 
        RIGHT 3 
       </div> 
      </div> 
     </div> 

私の解決策の問題は、右の列間のスペースです。私はあきらめてjavascriptを使用する前に助けを求めます:)

Answer 1

このレイアウトは、2つのサイドバイサイドカラムで実現するほうがはるかに簡単です。

実例はhttps://codepen.io/caleyshemc/pen/mBWWRLを参照してください。

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-8"> 
     <div class="p-5" style="background: orange;"> 
     # LEFT 1 
     </div> 
     <div class="p-5" style="background: yellow;"> 
     # LEFT 2 
     </div> 
     <div class="p-5" style="background: lightgreen;"> 
     # LEFT 3 
     </div> 
    </div> 

    <div class="col-sm-4"> 
     <div class="p-3" style="background: pink;"> 
     # RIGHT 1 
     </div> 
     <div class="p-3" style="background: grey;"> 
     # RIGHT 2 
     </div> 
     <div class="p-3" style="background: lightblue;"> 
     # RIGHT 3 
     </div> 
    </div> 
    </div> 
</div> 

あなたは絶対に項目の順序を保持しなければならない場合は、このレイアウトは、フレキシボックスでは不可能です。 MasonryなどのJavaScriptグリッドレイアウトライブラリを調べてください。

Answer 2

jQueryのソリューション：

var isMobileSorted = false; 

$(window).resize(function() { 
    if ($(window).width() < 768) { 
     if(!isMobileSorted) { 
      // sort mobile 
      $("#widget").insertAfter($("#pictures")); 
      $("#video").insertAfter($("#widget")); 
      $("#reviews").insertAfter($("#contact")); 
      isMobileSorted = true; 
     } 
    } else { 
     if(isMobileSorted) { 
      // resort desktop 
      $("aside").prepend($("#widget")) 
      $("#video").insertAfter($("#widget")); 
      $("#reviews").insertAfter($("#video")); 
      isMobileSorted = false; 
     } 
    } 
}).resize();