引导优先级垂直堆栈

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>