Rowspan auf Bootstrap 4 Beta 0 Grid System

Question

Hallo Ich arbeite an einer E-Commerce-Vorlage, die Bootstrap 4 Beta verwendet. Ich habe es auf dem Handy gemacht, aber auf dem Desktop konnte ich nicht herausfinden, wie man die Buy-Box unter dem Titel bleiben lässt. Auf meiner Aproach erscheint es unter dem Galerieabschnitt.

gewünschte Desktop-

Mobil Wunsch

<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

Sie könnten die util-Klassen verwenden, um die Spalten auf xl Breite zu schweben, was die "Best Buy" -Box unter dem zu bewegen, würde dazu führen, Titel, vorausgesetzt, die Höhe der Galerie ist größer.

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>