A better responsive sidebar

Sidebar content always gives me a little twinge when it comes to responsive design. Typically a left sidebar will end up stacking directly above the content and a right sidebar directly below. This can be fine, unless your left sidebar has 5 different content areas and now the user has to scroll two screen lengths just to read an article. Or the right sidebar has an important call-to-action you apparent to each visitor, but it resides underneath the content on a mobile device. By using separate regions and floats a single sidebar can easily be broken into two creating a responsive sidebar and giving you more room to play with responsive design. Take for example a structured template like so

<div id="page">
  ...
  <section class="sidebar-top">
      ...
  </section>
  <section class="content">
      ...
  </section>
  <section class="sidebar-bottom">
     ...
  </section>
 ...
</div>

Essentially we just set up a typical three column template. Now apply some CSS

section.sidebar-top,
section.sidebar-bottom {
  float: left;
}

section.content {
 float: right;
}

A responsive sidebar utilizes breakpoints to give you greater control over your design. This causes the section.sidebar-bottom to float underneath section.sidebar-top and keep the content area to the right of the sidebar. In this case we just set up a left sidebar that has a breakpoint we can utilize in responsive design. For my website I set a breakpoint for tablets - keep the top of the sidebar aligned left to the content, but stack the second half of the sidebar below the content.

@media (max-width: 979px) and (min-width: 768px) {
   section.sidebar-bottom {
      clear: both;
      float: none;
      width: 100%;
   }
}

And when we hit mobile, the sections stack on top of each other as they would in normal element hierarchy.

@media (max-width: 480px) {
  section.sidebar-top,
  section.content,
  section.sidebar-bottom {
      clear: both;
      float: none;
      width: 100%;
  }
}