Twitter的引導3行跨度和重排

我試圖實現與Twitter的引導如下：Twitter的引導3行跨度和重排

上除「特小」佈局中的所有屏幕應該是這樣的：在「超小」設備 enter image description here

它應該是這樣的

enter image description here

我已經嘗試過這個soultion Reordering divs responsively with Twitter Bootstrap?，但它不工作，因爲從「B」不「行跨度」超過「A」和「C」。

這意味着如果「B」大於「A」，則「A」和「C」之間存在間隙。有什麼辦法可以做到這一點？

致以問候

來源

2014-01-20 user1895259

看到這個：http://stackoverflow.com/questions/18514922/reordering-divs-responsively-with-twitter-bootstrap?lq=1 – ganders

這不是我想要的，因爲這當設備不是特別小時，答案只顯示重新排序但不顯示「float：right」或「rowspan」。 – user1895259

下面是答案。我添加了一些內聯樣式，以便可視化該示例。

http://jsfiddle.net/qVyLf/

<div class="row"> 
    <div class="col-sm-7" style="background: green; height: 300px;"> 
     <p>A</p> 
    </div> 
    <div class="col-sm-5 b-col" style="background: blue; height: 600px;"> 
     <p>B</p> 
    </div> 
    <div class="col-sm-7" style="background: red; height: 300px;"> 
     <p>C</p> 
    </div> 

</div> 

@media (min-width: 768px) { 
    .b-col { 
     float: right; 
    } 
}

來源

2014-01-20 19:53:03

這正是我想要的！謝謝！ – user1895259

Twitter的引導3行跨度和重排

回答

相關問題