title: Designing a responsive layout with Bootsrap
body: <p>I want to have a page with the following responsive layout:</p>
  
  <p><a href="http://i.stack.imgur.com/L5YRH.png" rel="nofollow">Image 1) A responsive page layout with 3 boxes (on small/medium screen)</a></p>
  
  <p><a href="http://i.stack.imgur.com/GqOxx.png" rel="nofollow">Image 2) A responsive page layout with 3 boxes (on wide screen)</a></p>
  
  <p>The goal is to make this page responsive so that whenever screen is too wide, box 3 will jump next to box 2 (like image 2). For this I use grid system of Bootstrap with allocating "8" spans for Box 1 and "4" for box 2 and 3. It works the way I described. Now I want to fix the position of Box 2 and Box 3 so when I scroll the page (to see the content of Box 1) I will see Box 2 and 3 in my viewport and I don't want to make Box 1 scrollable! I want the whole page to scroll! Do you know any Bootstrap solution that will handle this situation? (I want to keep the responsive layout of the whole page)</p>
  
  <p>This is the basic code that I have for the page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=row&gt;
    &lt;div class="col-md-8 col-lg-6"&gt;Box 1&lt;/div&gt;
    &lt;div class="col-md-4 col-lg-3"&gt;Box 2&lt;/div&gt;
    &lt;div class="col-md-4 col-lg-3"&gt;Box 3&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Right now I can make Box 1 scrollable but it will put the scrollbar next to box 1, but I want it to be at the right side of the page, so the whole page scrolls but box 2 and 3 are fixed. And at the same time, on large screens they will change their position and all 3 boxes will be next to each other!</p>
  
  <p>Is there any suggestions?</p>