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

Answer 1

Be sure to watch out for divs that have different heights. Those will cause things to not wrap all the way to the left like you might expect.

You can address this using the bootstrap clearfix (even conditionally) with something like:

<div class="clearfix visible-sm"></div>

Put that after a div where you'd want to start a new row at the -sm size. Repeat as needed.

Answer 2

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/