How to order a column depending on the screen size?

Question

I want to make the following layout for medium screen size

<div class="col-md-12">A</div> <div class="col-md-12">B</div> <div class="col-md-12">C</div> [A-12] [B-12] [C-12] 

I want to make the following layout for a large screen size

 <div class="col-lg-9>A</div> <div class="col-lg-3>C</div> <div class="col-lg-9>B</div> [A-9][C-3] [B-9] 

At first I make my small screen design (since it should be the first in the mobile phone?), Then I try to press / pull out B and C to put C next to A. But it does not work.

 <div class="col-md-12 col-lg-9">A</div> <div class="col-md-12 col-lg-9 col-lg-push-3">B</div> <div class="col-md-12 col-lg-3 col-lg-pull-9">C</div> //Expected result [A-9][C-3] [B-9] //Result I'm getting [A-9] [C-3][B-9] 

So, how do I make my layout to get the expected result?

Answer 1

Here is something like, I suppose you want:

Bootply : http://www.bootply.com/zu6yDOeHwn

HTML

 <div class="container"> <div class="col-md-12 col-lg-9"> <div class="row"> <div class="col-md-12 ">A</div> <div class="col-md-12">B</div> </div> </div> <div class="col-md-12 col-lg-3">C</div> </div>