title: Responsive design: fixed-width right sidebar wont 'float up'
body: <p>The main content of my webpage has two columns, this content will be compressed when the viewport gets smaller, and the 'columns' will be displayed below one another when the viewport becomes even smaller.</p>
  
  <p>It also has a right sidebar. The sidebar has to be fixed width (download buttons, social buttons, etc). It consists of two parts:</p>
  
  <ul>
  <li>the first part needs to go above the main content when the viewport becomes too small (the download buttons)</li>
  <li>the second part needs to go below the main content (social buttons)</li>
  </ul>
  
  <p>I have got most of this going, except that the second part of the right sidebar does not want to float up all the way when the 'columns' are below one another. The code I have so far:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="initial-scale=1.0" /&gt;
  &lt;style&gt;
  
  #minmax {
      max-width: 940px;
      min-width: 280px;
      margin: 0 auto;
      background-color: #d0ffd0;
  }
  
  .right_sidebar_top {
      clear: right;
      width: 220px;
      float: right;
      margin: 0 0 10px 20px;
      background-color: #c0c0ff;
  }
  
  .content_wrapper {
      margin: 0 250px 10px 0;
      background-color: #ffff90;
  }
  
  .content_left_col {
      width: 48%;
      margin-right: 4%;
      background-color: #e0ffff;
      float: left;
  }
  
  .content_right_col {
      width: 48%;
      background-color: #e0e0ff;
      float: left;
  }
  
  .right_sidebar_bottom {
      clear: right;
      width: 220px;
      float: right;
      margin: 0 0 10px 20px;
      background-color: #ffe080;
  }
  
  @media only screen and (max-width: 799px) {
      .content_left_col {
          width: 100%;
          margin-right: 0;
      }
      .content_right_col {
          width: 100%;
      }
  }
  
  @media only screen and (max-width: 599px) {
      .right_sidebar_top {
          clear: both;
          width: 100%;
          float: left;
          margin: 0;
      }
      .content_wrapper {
          margin: 0 0 10px 0;
      }
      .right_sidebar_bottom {
          clear: both;
          width: 100%;
          float: left;
          margin: 0;
      }
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="minmax"&gt;
          &lt;div class="right_sidebar_top"&gt;Lorem ipsum&lt;/div&gt;
          &lt;div class="content_wrapper"&gt;
              &lt;div class="content_left_col"&gt;Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Aliquam posuere mauris adipiscing neque
                  faucibus ultrices nec nec sem. Praesent venenatis hendrerit arcu, in
                  sollicitudin risus convallis faucibus.&lt;/div&gt;
              &lt;div class="content_right_col"&gt;Lorem ipsum&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="right_sidebar_bottom"&gt;Lorem ipsum&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have seen another question/solution here that used absolute positioning of the right sidebar, I think that wont work in my case because it needs to be below another right-sidebar element. I have spent about two days trying to figure this out, so I really hope someone can come up with a working approach!</p>
  
  <p><strong>edit:</strong></p>
  
  <p>I expect my target audience to be mostly android-mobile users. For the small amount of desktop users with older browsers I can relatively easy serve an unresponsive 960/12 css, but the solution should work across the popular android browsers.</p>