title: Bootstrap row: Aligning 3 columns on smaller screens
body: <p>I have 3 columns in one row in a fluid container (container-fluid). I have been trying to align them correctly on screen size changes for have not succeeded in aligning them on smaller screens. </p>
  
  <p>What it looks on big screens:</p>
  
  <pre><code>-----------------------------------------------------
  |   Left sidebar  |      Main      |  Right Sidebar |
  -----------------------------------------------------
  </code></pre>
  
  <p>What it should look like on smaller screens:</p>
  
  <pre><code>----------------------------
  |  Left Sidebar  |         |
  ------------------  Main   |
  |  Right Sidebar |         |
  ----------------------------
  </code></pre>
  
  <p>What it looks like now:</p>
  
  <pre><code>----------------------------
  |  Left Sidebar  |         |
  ------------------  Main   |
  |                |         |
  |                |         |
  |                |         |
  |                |         |
  |                |         |
  -----------------|---------|            
  |  Right         |
  ------------------
  </code></pre>
  
  <p>Here is the bootply: <a href="http://www.bootply.com/XHv1LaZJrA" rel="nofollow">http://www.bootply.com/XHv1LaZJrA</a>. I would like to know how I can achieve the desired layout on smaller screens given the structure of my code.</p>