CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design
James
James

Reputation: 209

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?

Upvotes: 0

Views: 40

Answers (2)

photo_tom
photo_tom

Reputation: 7342

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

Upvotes: 1

nitin
nitin

Reputation: 3787

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>

Upvotes: 1

Related Questions