Bootstrap 3 | three columns 3rd collapses under 1st in smaller screens

I am trying the whole morning to solve this one. It looks obvious but somehow I can't make it work.

I am using Bootstrap 3 and I want to have this effect with a 3 column layout

On wide screens
3 column layout
1 - 2 - 3

On narrow screens
3rd column collapses under the first column to create a two column layout like:

1 | 2
3 | 2

At this point my 3rd column always stacks after the seconds column height!

On phones
1
2
3

Thanks in advance for any help

Th column widths will all work fine with a regular set of classes like this:

class="col-xs-12 col-sm-6 col-md-4"

It's just a matter of targeting sm sized screens to appropriately clear the content. Based off my answer to Change section order with Bootstrap 3, you could do something like this:

<!-- language: lang-html -->

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">1</div>
    <div class="col-xs-12 col-sm-6 col-md-4 middleDiv">2</div>
    <div class="col-xs-12 col-sm-6 col-md-4">3</div>
</div>

<!-- language: lang-css -->

@media (min-width: 768px) and (max-width: 991px) { 
    .middleDiv {
       float: right;
    }
}

Demo in Fiddle