How to achieve this Bootstrap layout? - css

Question

I have a Bootstrap layout that I would like to create but I can't figure out how I would accomplish it. Basically, on desktop sizes the layout will be a 4-column, a 6-column and a 2-column next to each other in that order, and then mobile I would like for the 4 and the 2-column to remain next to each other and for the 6-column to drop below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 col-sm-4">
A
</div>
<div class="col-sm-6">
B
</div>
<div class="col-xs-4 col-sm-2">
C
</div>
<div class="clearfix"></div>
</div>
</div>
So on mobile I want "A" and "C" to be inline and "B" to be a full 12-columns below "A" and "C"

Answer 1

You can do it with regular bootstrap push and pull and don't need to rely on absolute positioning. See bootstrap docs here: http://getbootstrap.com/css/#grid-column-ordering
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

Answer 2

You could try something like this: - as long as this container is relatively poisitioned, it should be fine.
https://jsfiddle.net/znwsk6fw/
<div class="container">
<div class="row">
<div class="col-xs-8 col-sm-4">
A
</div>
<div class="col-sm-6 col-md-6 col-xs-12 ">
B
</div>
<div class="col-xs-4 col-sm-2 col-md-2 column_c">
C
</div>
<div class="clearfix"></div>
</div>
</div>
#media screen and (max-width:768px) {
.column_c {
position:absolute;
right:0;
}
}