title: CSS wrapping two columns (Main content & Menu Bar)
body: <p>I am seeking to have a menu bar located on the right hand side of the page and have the main page content wrap underneath it. By using a <code>float:right;</code> in CSS I am able to achieve the result I want for desktop, though for Mobile, the Menu bar sits above the content, when I want it to sit below it. </p>
  
  <p>I have tried methods (such as flex tables / reorder) to no avail. Any thoughts to point me in the right direction would be greatly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content {
      display: block;
      background: #f5f5f5;
      width: 100%;
  }
  
  .information {
      background: #ddd;
      padding: 10px;
      width: 100;
      display: block;
  }
  
  .menu {
      width: 100%;
      display: block;
  }
  
  .side-info {
      display: block;
      text-align: center;
      font-size: 13px;
      padding: 10px 20px;
  }
  
  .colour-1 {
      background: pink;
  }
  
  .colour-2 {
      background: lightblue;
  }
  
  @media all and (min-width: 992px) {
      .content {
          max-width: 1200px;
          background: #ccc;
          margin: 0 auto;
      }
  
      .information {
          width: auto;
      }
  
      .menu {
          width: 250px !important;
          display: block;
          float: right;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="content"&gt;
  
      &lt;aside class="menu"&gt;
          &lt;div class="side-info colour-1"&gt;Menu Item &lt;/div&gt;
          &lt;div class="side-info colour-2"&gt;Menu Item &lt;/div&gt;
          &lt;div class="side-info colour-1"&gt;Menu Item &lt;/div&gt;
          &lt;div class="side-info colour-2"&gt;Menu Item &lt;/div&gt;
          &lt;div class="side-info colour-1"&gt;Menu Item &lt;/div&gt;
          &lt;div class="side-info colour-2"&gt;Menu Item &lt;/div&gt;
          &lt;div class="side-info colour-1"&gt;Menu Item &lt;/div&gt;
          &lt;div class="side-info colour-2"&gt;Menu Item &lt;/div&gt;
      &lt;/aside&gt;
  
      &lt;div class="information"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis tristique enim, ut laoreet est maximus non. Duis cursus, ligula quis porta scelerisque, nunc nunc gravida neque, faucibus varius erat est non ipsum. Nunc vitae risus maximus, luctus turpis nec, facilisis justo. Pellentesque fermentum, nulla nec accumsan luctus, elit dolor tincidunt dui, vel imperdiet tortor massa et magna. Duis volutpat suscipit luctus. Sed sit amet nulla mollis, volutpat diam eu, lacinia velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec lobortis urna ante, imperdiet ornare diam aliquet in. Vestibulum quis purus ultricies, pretium nulla id, maximus risus. Nunc volutpat, leo vitae imperdiet consectetur, elit odio ornare ipsum, sed fringilla diam lectus vel purus. Aenean quis diam sem. Donec quis tincidunt neque, quis eleifend felis. In hac habitasse platea dictumst. Praesent scelerisque, sapien vitae condimentum vestibulum, neque tellus tempus erat, et interdum arcu velit vel ipsum.&lt;/p&gt;
          &lt;p&gt;In blandit sed augue nec hendrerit. Curabitur sed finibus mi. Donec in laoreet sapien, ac blandit odio. In hac habitasse platea dictumst. Donec vel lorem vitae lacus placerat facilisis. Etiam tortor dui, consequat sit amet lorem eu, lacinia eleifend tellus. Sed tristique tincidunt iaculis. Suspendisse laoreet augue leo, eu hendrerit neque pellentesque sed.&lt;/p&gt;
          &lt;p&gt;Aliquam a suscipit ante. Sed fermentum eros a libero pellentesque imperdiet. Maecenas bibendum lobortis scelerisque. Sed nisi arcu, tristique sit amet lectus sit amet, suscipit gravida ex. Ut ut tortor cursus nulla lobortis posuere non vitae libero. Aliquam vitae neque ornare, tincidunt nibh ac, accumsan magna. In ut malesuada sem. Fusce non porttitor ante.&lt;/p&gt;
          &lt;p&gt;Nulla at leo eget eros congue aliquet. Vivamus tincidunt erat ligula, sed tincidunt purus ullamcorper sit amet. Vestibulum suscipit molestie lectus in sagittis. Ut ipsum urna, tempor eget libero sagittis, gravida fringilla orci. Sed efficitur porta enim, eu auctor neque dignissim non. Suspendisse vitae purus at purus tristique pulvinar. Ut sed eros commodo, luctus diam sit amet, pulvinar tellus. &lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/gCctN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gCctN.png" alt="enter image description here"></a></p>