Three column responsive layout with top div in the center on large screens

Question

I am trying to create a responsive layout that has three columns at the largest size. On mobile everything will stack on top of each other:

On larger there will be two columns. I would like the first div to be in the second column:

On the largest screen the last div will be in the third column and at the very top:

I have put together a codepen to demonstrate what I have but I cant seem to get the last div to go to the top on the largest screen.

http://codepen.io/mikes000/pen/ceDEi

I am trying to avoid using flexbox or anything that does not work in IE9. Also avoiding absolute or relative positioning to push the last box up because the content length for each area is going to vary from page to page and I don't want to run into any overflow issues.

Any suggestions?

HTML:

<div class="main">


  <div class="breadcrumbs">
      asdf / asdf / asdf asdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdf
  </div>

  <div class="left-sidebar">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>
    <h2>Pellentesque habitant morbi</h2>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>  
  </div>

  <div class="main-content">

      <div class="content-wrap">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
      </div>


  </div>
  <div class="right-sidebar">
    <h2>morbi tristique</h2>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>  
  </div>

</div>

CSS:

.main{
  width:100%;
  max-width:1000px;
  margin:auto;

  @media (min-width:400px) {
    .breadcrumbs{
      float:right;
       width:80%;
    }

    .left-sidebar{
      float:left;
      width:20%;
    }

    .main-content{
      width:80%;
      float:right;
    }
  }

  @media (min-width:700px) {
      .breadcrumbs{
        float:right;
        width:60%;
        margin-right:20%;

      }

      .main-content{
        width:100%;
        float:none;
      }
      .main-content{
        width:60%;
        float:left

      }
      .right-sidebar{
        width:20%;
        float:left;
      }
  }

}

.breadcrumbs{
   background-color:#FF9D5E;
}

.left-sidebar{
  background-color:#CEE7EA;
}

.main-content{
  background-color:#94BC6C;
}

.right-sidebar{
  background-color:#FEA9A1;
}

Answer 1

Your 1st and 2nd block swap order, and your 4th block swaps to the 3rd position. So fundamentally you cannot use a typical responsive design. However the problem can still be solved by duplicating your orange and red fields. If you are using a template system, this is actually pretty easy.

think of it like this:

block 1- orange1
block 2- blue
block 3- orange2
block 4- red1
block 5- green
block 6- red2

My suggestion would be to redesign the page to work with browser flow. But if this is the design you are given, then here is one way to approach it:

Your html would look something like this (assuming html5)

<nav class="orange1"></nav>
<section class="blue"></section>
<aside class="red1"></aside>
<nav class="orange2"></nav>
<section class="green"></section>
<aside class="red2"></aside>

Your css would look something like this...

.orange1,.red2 {
    display:none;
}
.blue {
    float:left;
    width:200px;
}
.red1 {
    float:right;
    width:200px;
}
.orange2,.red2 {
    width:100%;
}

@media (max-width:700px;) {
    .red1 {
        display:none;
    }
    .red2 {
        display:block;
    }
}

@media (max-width:400px;) {
    .orange1 {
        display:block;
    }
    .orange2 {
        display:none;
    }
    .blue {
        float:none;
        width:100%;
    }
}

Give or take some bugs, this code is given as a reference only.