引导：在桌面布局中更改列布局的顺序 [英] Bootstrap: changing the order of the column layout in desktop layout

问题描述

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

在移动设备中

  [3] 
 [9] 
 [3] 
  
 
 
 
但在桌面设备中，我想要一个布局，如
  [9] [3] 
 [3] 
  
我尝试了 col-md-pull-3 和 col-md-push-9 第三列
 
 
 
我目前这样做是由JS，但希望一个解决方案与CSS，因为它会更轻。
 
 
 
  
 
the mobile first layout will be having three columns in a row 3, 9 and 3 respectively(I know total available col are 12, please read full question)

In mobile devices
[3]
[9]
[3]
But in desktop devices I want to have a layout like
[9][3]
   [3]
I tried col-md-pull-3 and col-md-push-9 but no luck. The third column 

I am currently having this done by JS, but hoping for a solution with CSS since it will be lighter.

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



solution by @Catalin Munteanu has some limitations.



Column-2 must have sufficient height to make this work if column-2's height is less than column-1's height column-3 will be floated under column-2.
解决方案
Your layout should be like this:
<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>
Edit: This should work and remove the gap between those columns:
<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

                        
这篇关于引导：在桌面布局中更改列布局的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！