title: I have 3 divs and they're wrapping instead of pushing right
body: <p>I am creating a dashboard and have 3 divs like in the example below. At a certain screen size, the left-sidebar collapses and a button appears on the screen to toggle the sidebar, similar to the <a href="https://getbootstrap.com/docs/3.3/examples/offcanvas/#" rel="nofollow noreferrer">Bootstrap Off-Canvas</a> example.</p>
  
  <p>When I toggle the left-sidebar, the right-sidebar wraps under the middle-column. </p>
  
  <p>What can I do to prevent the right-sidebar from wrapping and instead have it push right and crop/hide the overflow?</p>
  
  <p>Thanks!</p>
  
  <pre><code>   &lt;div class="container-fluid main-content"&gt;
      &lt;div class="left-sidebar"&gt;Content of Left Sidebar&lt;/div&gt;
      &lt;div class="middle-content"&gt;Content of Middle&lt;/div&gt;
      &lt;div class="right-side"&gt;Content of Right Sidebar&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>