Need help on Bootstrap Pull Push issue

Question

My first question here. I got headache in using bootstrap pull and push on the website i'm working on.
This is what I want to achieve:
1. On large view port:
https://i.stack.imgur.com/LtPuP.png

2. On mobile view:
https://i.stack.imgur.com/i7iVP.png

I'm using bootstrap to pull the block B to the left. The problem is that it is important to have block A and B: width 4, and block C: width 8. I don't know how to do it because the total width will be more than 12. Please help me. Thank you.

Answer 1

You can use column nesting in bootstrap to give A & B width:4 and C width:8.

<div class="col-md-4">
  <div class="col-md-12" style="height:100px;background:red;">A</div>
  <div class="col-md-12" style="height:100px;background:green">B</div>
</div>

<div class="col-md-8" style="height:200px;background:blue">C</div>

OR without nesting the code(in this C will be above B in small devices) will look like this

HTML

<div class="col-md-4" style="height:100px;background:red;">A</div>
<div class="col-md-8 float" style="height:100px;background:blue">C</div>
<div class="col-md-4" style="height:100px;background:green">B</div>

CSS

@media (min-width: 992px) 
  { 
    .float
    {
      float:right!important;
      height: 200px!important;
    } 
  }

Link to jsfiddle: http://jsfiddle.net/arshadmuhammed/0qvL5bxg/