Twitter Bootstrap Column Positions

问题

I have two columns which I would like to display side by side on a desktop.

I want the following column order on a desktop (Column 2 is taller than Column 1):

[Column 1][Column 2]
[Column 3]

I want the following column order on a mobile:

[Column 1]
[Column 2]
[Column 3]

Here is an example I have created: http://jsbin.com/folekajera/1/edit?html,css,output

The problem with the example, is in the desktop view there is a gap between Column 1 and Column 3.

How would this gap be removed?

回答1:

The reason you have the gap in the desktop view is that Bootstrap's grid has 12 columns / row. So the first two div's use up a full row's width. The third column is effectively in it's own row. Nitin's answer has the correct way to handle the mobile layout.

Therefore, the effective html that you actually have is below.

---

Edit - After your comment, I re-thought my answer. There is a way to do it. I've revised the html from my first answer. The key item is the "pull-right" class below. For details see Column ordering.

<div id="second-col" class="col-xs-12 col-sm-4 pull-right">

I've updated you jsbin file at http://jsbin.com/rinejayojo/1/edit?html,css,output

回答2:

When u want something to be full on mobile its class will be "col-xs-12".

This is how it should be.

<div class="row">
    <div id="first-col" class="col-xs-12 col-lg-4">
      Column 1
    </div>  
    <div id="second-col" class="col-xs-12 col-lg-8">
      Column 2
    </div>
   <div style="background-color:green" class="col-xs-12 col-lg-12">
     Column 3
   </div>
</div>

来源：https://stackoverflow.com/questions/29186190/twitter-bootstrap-column-positions