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

I tried the push/pull as shown in the answer by Skelly but C ends up in a new row once heights are applied: http://www.bootply.com/Q3djHYawgb#

If B can be shown first when shown in small size, then I think it makes more sense to create a row inside the right hand side column to contain A and C:

    
Content of B
    

        

            
Content of A
        
        

            
Content of C
        
    

See http://jsfiddle.net/hoodoo99/L2BE9/