Bootstrap 3: Column Ordering - css

Question

I have these three columns.
In a Medium screen, It should go like: Column A (col-md-6) will be at the top, Column B (col-md-6) beside Column A,and Column C (col-md-12) underneath Column A and B.
Like so:
I'm having a problem with coming up into this kind of ordering.
Here's my current code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content1 col-xs-12 col-md-6">
6-Col-[X-Small] A
</div>
<div class="content3 col-xs-12 col-md-12">
12-Col-[Medium] C
</div>
<div class="content2 col-xs-12 col-md-6">
6-Col-[X-Small] B
</div>
</div>
</div>
</div>
It looks like this at the moment:
I checked out the Bootstrap Docs and used column pushing/pulling.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content1 col-xs-12 col-md-6">
6-Col-[X-Small] A
</div>
<div class="content3 col-xs-12 col-md-12 col-md-push-6">
12-Col-[Medium] C
</div>
<div class="content2 col-xs-12 col-md-6 col-md-pull-12">
6-Col-[X-Small] B
</div>
</div>
</div>
</div>
But this method seems to mess up the layout.
Did I miss something in my code? It doesn't go as I intended.

Answer 1

You can nest your row classes within each other like so:
<div class="container">
<div class="row">
<div class="content1 col-xs-12 col-md-6">
6-Col-[X-Small] A
<div class="row">
<div class="content3 col-xs-12 col-md-12">
12-Col-[Medium] C
</div>
</div>
</div>
<div class="content2 col-xs-12 col-md-6">
6-Col-[X-Small] B
</div>
</div>
</div>
and then set a custom media query on the nested .content3 element
#media(min-width: 992px){
.content3{
width: calc(100% * 2);
}
}
The above uses the same width break point as Bootstrap's .col-md-12. At that threshold, the width of .content3 becomes twice that of it's nesting DIV.
Fiddle

Answer 2

<div class="container">
<div class="row">
<div class="content1 col-md-6">
6-Col-[X-Small] A
</div>
<div class="content2 col-xs-12 col-md-6">
6-Col-[X-Small] B
</div>
</div>
<div class="row">
<div class="content3 col-xs-12 ">
12-Col-[Medium] C
</div>
</div>
</div>

Answer 3

You'll have to duplicate some of your content(either column b or c) and add visible-xs and hidden-xs to the appropriate version of content. Initially, I didn't like the idea of duplicating the content, but then realized it made sense for optimization as I could load bigger/smaller photo depending on device.
See my previous similar question, with a great example Fiddle by #paulalexandru.
Here is the setup with your example content, and a Fiddle:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content1 col-md-6 purple">
6-Col-[X-Small] A
</div>
<div class="content3 col-md-12 visible-xs blue">
12-Col-[Medium] C
</div>
<div class="content2 col-md-6 red">
6-Col-[X-Small] B
</div>
<div class="content3 col-md-12 hidden-xs green">
12-Col-[X-Small] C V2
</div>
</div>
</div>
</div>
Note: The blue, red, green, purple classes are for easier visibility of what's going on in the example.
Also, if you've got content that is col-xs-12 and want it to also be col-12 at bigger screens, it will happen automatically. Don't specify col-xs-12 and col-md-12 If you do it seems to throw off the height (in this example anyways - why is a little unclear to me, but that's beside the point).
Patient: "It hurts when I do this..?" Dr: "Don't do that." :)
Also also, you'll notice a 2nd jump in layout at sm, because that's what lives between xs and md. Assuming you don't want that, you should replace col-md-* with col-sm-* in your example. Unless that's behaviour you want.