I want to do 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 do the following layout for 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]
I'm doing my smaller screen design first (since it's supposed to be mobile first right?) then I'm trying to push/pull B and C to put C right next to A. But it's not working.
<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 should I do my layout to get the expected result?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With