Reordering divs responsively with Twitter Bootstrap?

Question

I am working with Twitter Bootstrap v3 and want to reorder elements responsively, using column ordering and offsetting.

This is how I would like to use my elements.

Answer 1

The answer provided by @skelly is great starting point, but does cause some vertical alignment issues. Imagine A is a tall div, then C is vertically aligned below A.:

[A] [B]
[ ]
    [C]

Also, If you want to take this a step further you may also need to consider using clearfix blocks. For example;

Without clearfix md or lg might end up as:

[A] [B]
    [C] [D]

This is particularly important if you want more than 2 elements in the final "column", or the heights of the elements start throwing other elements out of alignment.

With the clearfix md or lg would be:

[A] [B]
    [C]
    [D]

Example fiddle: http://jsfiddle.net/L5174o8d/