Bootstrap 4 Flottant avec Flex

Question

Comment puis-je faire flotter ma mise en page comme cela avec Bootstrap 4 flex Grid? Je

essayé avec la fonction de commande flex mais voir mon résultat et le problème

<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> 

Le problème avec ma solution sont les espaces entre les colonnes de droite. J'espère avoir de l'aide avant que j'abandonne et j'utilise javascript :)

Answer 1

Cette disposition serait beaucoup plus facile à réaliser avec deux colonnes côte-à-côte.

Voir https://codepen.io/caleyshemc/pen/mBWWRL pour un exemple de travail.

<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> 

Si vous devez absolument conserver l'ordre des articles, cette mise en page n'est pas possible avec Flexbox. Regardez dans une bibliothèque de disposition de grille JavaScript, par exemple Masonry.

Answer 2

jQuery Solution:

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();