Bootstrap 3: Column Ordering

css, twitter-bootstrap, twitter-bootstrap-3

Solution

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

Problem

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.

Original source