Twitter Bootstrap 3 rowspan和reorder [英] Twitter Bootstrap 3 rowspan and reorder

问题描述

我尝试使用twitter bootstrap实现以下功能：在所有屏幕上，除超小外，布局应如下所示：

看起来像这样

p>

我已经尝试了这种灵魂使用Twitter Bootstrap？作为响应式重新排序div，但它不起作用，因为从B到A和C没有rowspan。

这意味着如果B大于A，则A和C之间有间隙。
有什么办法可以达到这个目的？

最好的问候

解决方案

这是答案。我添加了一些内联样式，以便可视化该示例。

http://jsfiddle.net / qVyLf /

 < div class =row> 
< div class =col-sm-7style =background：green; height：300px;> 
< p> A< / p> 
< / div> 
< div class =col-sm-5 b-colstyle =background：blue; height：600px;> 
< p> B< / p> 
< / div> 
< div class =col-sm-7style =background：red; height：300px;> 
< p> C< / p> 
< / div> 
 
< / div> 
 
 @media（min-width：768px）{
 .b-col {
 float：right; 
} 
} 
  

I try to achieve the following with twitter bootstrap:

on all screens except "extra small" the layout should look like this:

on "extra small" devices it should look like this

I already tried this soultion Reordering divs responsively with Twitter Bootstrap?, but it doesn't work, because there is no "rowspan" from "B" over "A" and "C".

So that means if "B" is larger than "A" there is a gap between "A" and "C". Is there any way to achieve this?

Best regards

解决方案

Here's the answer. I added some inline style just to visualize this example.

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;
    }
}

这篇关于Twitter Bootstrap 3 rowspan和reorder的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！