Bootstrap 3: Column Ordering

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

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.

Answer 3

    <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>