引導優先級垂直堆棧

Question

我想問問，如果這種列堆疊可能在Bootstrap上而不使用Javascript或JQuery。

This One 而不是This。

我用

COL-MD-6

此刻風格我的專欄，但我無法弄清楚如何堆疊優先先填垂直空間，直到它到達父<div>的後端（高度），然後填充相鄰的水平空間向下，依此類推。

我在Google的任何地方都找不到任何關於此問題的主題。所以，我來這裏看看它是否真的有可能或者不是。

謝謝。

Answer 1

是的，這是可能的。但你需要兩個包裝。一個用於5和6的1 ~ 4秒。

jQuery是僅用於演示視口的變化

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    $('.wrapper').toggleClass('v2') 
 
    }); 
 
});

div div div { 
 
    border: 1px solid #ddd; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    float: left; 
 
    padding: 20px 20px; 
 
} 
 
div { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    width: 100px; 
 
    height: 250px; 
 
} 
 
.w-1, 
 
.w-2 { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.v2 .w-1, 
 
.v2 .w-2 { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="w-1"> 
 
    <div class="col-xs-6">1</div> 
 
    <div class="col-xs-6">2</div> 
 
    <div class="col-xs-6">3</div> 
 
    <div class="col-xs-6">4</div> 
 
    </div> 
 
    <div class="w-2"> 
 
    <div class="col-xs-6">5</div> 
 
    <div class="col-xs-6">6</div> 
 
    </div> 
 
</div> 
 
<hr/>Only for demo: 
 
<button>Toggle layout</button>