Rowspan sur Bootstrap 4 Beta 0 Système de grille

Question

Salut Je travaille sur un modèle eCommerce qui utilise Bootstrap 4 Beta. Je l'ai fait fonctionner sur mobile, mais sur le bureau, je ne pouvais pas comprendre comment faire de la boîte d'achat rester sous le titre. Sur mon approche il apparaît sous la section Galerie.

désiré Bureau

souhaitee mobile

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xl-1 d-none d-md-block"></div> 
     <div class="col-xl-10 col-12"> 
      <div class="row"> 
       <div class="col-xl-6 order-xl-1 col-12 order-2 d-flex"> 
        Gallery 
       </div> 
       <div class="col-xl-6 order-xl-2 col-12 order-1"> 
        Title 
       </div> 
       <div class="col-xl-6 order-xl-3 col-12 order-3"> 
        Buy Box 
       </div> 
       <div class="col-12 order-xl-4 order-4"> 
        Description 
       </div> 
       <div class="col-12 order-xl-5 order-5"> 
        Related 
       </div> 
      </div> 
     </div> 
     <div class="col-xl-1 d-none d-md-block"></div> 
    </div> 
</div> 

Answer 1

Vous pouvez utiliser les classes util pour faire flotter le Col. sur xl largeurs, ce qui causerait la boîte "Best Buy" pour passer sous la titre, en supposant que la hauteur de la galerie est plus grande.

https://www.codeply.com/go/3E3Y9A5zZa

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xl-1 d-none d-md-block"></div> 
     <div class="col-xl-10 col-12"> 
      <div class="row d-xl-block d-flex h-100"> 
       <div class="col-xl-6 order-xl-1 col-12 order-2 order-xl-1 d-flex bg-warning tall float-left"> 
        Gallery 
       </div> 
       <div class="col-xl-6 order-xl-2 col-12 order-1 bg-primary float-left"> 
        Title 
       </div> 
       <div class="col-xl-6 order-xl-3 col-12 order-3 bg-primary float-left"> 
        Buy Box 
       </div> 
       <div class="col-12 bg-info order-4 float-left"> 
        Description 
       </div> 
       <div class="col-12 bg-info order-5 float-left"> 
        Related 
       </div> 
      </div> 
     </div> 
     <div class="col-xl-1 d-none d-md-block"></div> 
    </div> 
</div>