title: Bootstrap mixed grid layout
body: <p>I would like to define a layout which looks like this on large displays:</p>
  
  <pre><code>.----------------------------.
  |       |        B           |
  |  A    |____________________|
  |       |                    |
  |       |                    |
  |       |                    |
  |       |        C           |
  |       |                    |
  |_______|____________________|
  </code></pre>
  
  <p>"A" should be fixed width, while "B" and "C" should dynamically expand to fully cover the remaining available width (i.e. should not be maximized and leave an empty margin on large displays - I think this is the fluid layout).</p>
  
  <p>Now, upon decreasing the screen width below a specific amount, I would like to these 3 blocks rearranged to be under each other in the order of A, B, C, with all 3 utilizing the full available width.</p>
  
  <p>Can you help me with this please? So far I have the following setup:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="col-md-2"&gt;A&lt;/div&gt;
      &lt;div class="col-md-10"&gt;B&lt;/div&gt;
      &lt;div class="col-md-10"&gt;C&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This looks fine in full width, but when decreasing the width, it starts to shrink also "A" in width which I do not want. </p>
  
  <p>If I add a fixed width to "A", it collapses B &amp; C under A too early when decreasing the width - I would like B &amp; C to decrease dynamically, unlike A - I think specifying a width messes up fully the layout.</p>
  
  <p>Here is a <a href="http://jsbin.com/pucigobujaco/1/edit" rel="nofollow">JSBin</a>.</p>