How to insert a column between two rows of another column during responsiveness in bootstrap - css

Question

My normal layout is:
|A||C|
|B||C|
There are two columns - left and right.
'A' and 'B' are two rows of left column
'C' is right column.
When I resize, i want it to respond like:
|A|
|C|
|C|
|B|
Code:
<div class="container row">
<div class="col-sm-8">
<div class="row">
a
</div>
<div class="row">
b
</div>
</div>
<div class="col-sm-4">
c
</div>
</div>
I think I have found the solution based on Dan's
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="col-sm-12 col-xs-12" style="background-color: red">a</div>
<div class="col-sm-6 col-xs-12 visible-xs" style="background-color: blue">c</div>
<div class="col-sm-12 col-xs-12" style="background-color: orange">b</div>
</div>
<div class="col-sm-4 hidden-xs">
<div class="col-sm-12 col-xs-12" style="background-color: blue">c</div>
</div>
</div>
</div>

Answer 1

Based on my understanding of your needs this is how you accomplish your reordering using bootstrap the way it was intended:
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">a</div>
<div class="col-sm-6 col-xs-12">c</div>
<div class="col-sm-push-6 col-sm-6 col-xs-12">c</div>
<div class="col-sm-pull-6 col-sm-6 col-xs-12">b</div>
</div>
</div>
jsFiddle
Here's a link to the official bootstrap documentation on ordering.
Update based on comments:
Here's a solution using bootstrap exclusively:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-12 col-xs-12">a</div>
<div class="col-sm-12 col-xs-12">c</div>
<div class="col-sm-12 col-xs-12 visible-xs">c</div>
<div class="col-sm-6 col-xs-12 visible-xs">b</div>
</div>
<div class="col-sm-6 hidden-xs">
<div class="col-sm-12 col-xs-12">c</div>
<div class="col-sm-12 col-xs-12">b</div>
</div>
</div>
</div>
jsFiddle

Answer 2

.col-*-push-* and .col-*-pull-* are used to reorder columns for differnt screen sizes. So you would use .col-sm-pull-6 on column C2 and .col-sm-push-6 on column B. Simply adjust the amount of columns you need to push / pull to your layout.
Learn more at : getbootstrap.com/css/#grid

Answer 3

could also use float as a solution (if you don't feel like using push/pull)
HTML
<div class="row">
<div class="col-sm-6 col-xs-12 a">
AAA
</div>
<div class="col-sm-6 col-xs-12 c">
CCC
</div>
<div class="col-sm-6 col-xs-12 c">
CCC
</div>
<div class="col-sm-6 col-xs-12 b">
BBB
</div>
</div>
Css
.a,.b,.c{height:60px;}
.a{background:red;}
.b{background:yellow;}
.c{background:blue;float:right;}
#media screen and (max-width:767px){
.c{float:none;}
Here's a jsfiddle jsfiddle