基于Bootstrap 4 Beta 0网格系统的Rowspan

Question

嗨，我正在做一个eCommerce模板，它使用的是Bootstra4Beta。我让它在移动平台上工作，但在桌面上，我想不出如何使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，这将导致"Best“框在标题下移动，假设库的高度更高。

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>