Bootstrap：更改桌面布局中列布局的顺序

Question

移动设备的第一个布局将分别在第3行，第9行和第3行中有三列（我知道总可用的col是12，请阅读完整的问题）

在移动设备中

[3]
[9]
[3]

但在桌面设备中，我希望有一个像

这样的布局

[9][3]
   [3]

我尝试了col-md-pull-3和col-md-push-9，但没有运气。第三栏

我目前正在通过JS完成这项工作，但希望使用CSS解决方案，因为它会更轻。

http://www.bootply.com/8fqIOpmpM7

@Catalin Munteanu的解决方案有一些限制。

如果第2列的高度小于第1列的高度，则第2列必须具有足够的高度才能使其工作。第3列将在第2列下浮动。

Answer 1

你的布局应该是这样的：

<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-md-3 pull-right">3 cols</div>
        <div class="col-xs-12 col-md-9 pull-right">9 cols</div>        
    </div>

    <div class="row">
        <div class="col-xs-12 col-md-3 pull-right">3 cols</div>
    </div>
</div>

编辑：这应该有效并消除这些列之间的差距：

<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-md-3 pull-right">3 cols</div>
        <div class="col-xs-12 col-md-9 pull-left">
            <p>THIS</p>
            <p>WON'T</p>
            <p>BREAK</p>
            <p>RIGHT</p>
            <p>FLOATED</p>
            <p>COLUMNS</p>
        </div>        
        <div class="col-xs-12 col-md-3 pull-right">3 cols</div>
    </div>
</div>

JSFiddle