Bootstrap 4 Beta 0网格系统上的Rowspan

Question

您好我正在使用一个使用Bootstrap 4 Beta的电子商务模板。我让它在移动设备上工作，但在桌面上我无法想象如何让Buy Box保持在标题之下。在我的方面，它在画廊部分下面。

所需的桌面

渴望移动

<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，这将导致＆＃34; Best Buy＆＃34;假设画廊的高度较高，则在标题下移动框。

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>