Organising a 3-column to 2-column in Twitter Bootstrap 3

Question

So this totally works (goes from 4 columns to 2 on small screens):

<div class="row">
    <div class="col-lg-3 col-sm-6"> 1</div>
    <div class="col-lg-3 col-sm-6"> 2</div>
    <div class="col-lg-3 col-sm-6"> 3</div>
    <div class="col-lg-3 col-sm-6"> 4</div>
</div>

As does my 3-column, however the middle column gets stacked on top of the third one (which by then is the right/2nd column).

<div class="row" id="footer">
    <div class="col-lg-3 col-sm-6">
        1
    </div>
    <div class="col-lg-3 col-sm-6">
        2
    </div>
    <div class="col-lg-6 col-sm-6">
        3
    </div>
</div>

How can I tell the middle column to stack above or underneath the first column? col-sm-pull-6 doesn't work for example.

Desired result:

1 - 3
2 - ..

The problem with switching 2 and 3 and then using push and pull, is that the 2nd column still goes a top of the 3rd column. And I need them to be like in my desired result 'diagram'.

Edit: What I can do is give the first column col-sm-12. This will push the other 2 down. That way the order is good, and since it's for a footer, the fact that the paragraph column is at the complete bottom, isn't bad either. But I'm still open for better suggestions.

The grid now looks like this:

1
2 - 3

unfortunately, browser does not work in a up-down-up (reverse "N") fashion. It works in a "Z" fashion. so, the only way for it to work the way you want (I'm assuming btw) is to re-assign the middle column as the last column using JS. Hope that helps. — peterchon
the push and pull classes should do this, if used properly. It's difficult to envision what you mean completely though. Can you set up a fiddle? — Tim Wasson
Here's a jfiddle of my example. I want the lists of links to be on the left side and the paragraph to take the other half (6 col); jsfiddle.net/gjacobs/knjhT — Gerben Jacobs

scooterlord scooterlord · Accepted Answer · 2014-10-19T00:23:18

So here goes,

first of all you should use the designs for smaller screens BEFORE larger screens like so:

<div class="col-sm-6 col-lg-3"> (...)

Now for your design to happen you need to to this:

<div class="col-sm-6 col-lg-3">
1
</div>
<div class="col-sm-6 col-lg-3 col-lg-push-3">
3
</div>
<div class="col-sm-6 col-lg-3 col-lg-pull-3">
2
</div>

...what I did is that I reversed the 2nd with 3rd column so that they fit my needs for the smaller screen and then by using push and pull I adjusted for the larger screens.

edit: here is a working fiddle:

http://jsfiddle.net/ujrwyrbr/2/

Organising a 3-column to 2-column in Twitter Bootstrap 3

2 Answers