引導程序4 Beta 0網格系統上的Rowspan

Question

嗨我正在開發一個使用Bootstrap 4 Beta的電子商務模板。我讓它在移動設備上工作，但在桌面上，我無法確定如何使購買框保持標題。在我看來，它在畫廊部分下出現。

所需的桌面

期望的移動

<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

您可以使用UTIL類浮在xl寬度的的cols，這將導致「百思買」框下移到標題，假設畫廊的高度更高。

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>