css - Bootstrap : changing the order of the column layout in desktop layout

Question

移动优先布局将分别在第 3、9 和 3 行中有三列(我知道可用的列总数为 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 列 float 在第 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