title: Bootstrap css: aligning columns on small screens
body: <p><strong>EDIT:</strong>
  After implementing the accepted answer below, I have the following, which is what I originally had before implementing any push/pull tactics. Thus the problem persists. Any suggestions that could help achieve the desired layout on small screens are welcome.</p>
  
  <pre><code>----------------------------
  |  Left Sidebar  |         |
  ------------------  Main   |
  |                |         |
  |                |         |
  |                |         |
  |                |         |
  |                |         |
  -----------------|---------|            
  |  Right         |
  ------------------
  </code></pre>
  
  <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 all day, but to no avail. </p>
  
  <p>1: right sidebar </p>
  
  <p>2: left sidebar </p>
  
  <p>3: main </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          |  Main    |
  |  Sidebar       ------------
  |                |  Right   |
  |                | sidebar  |
  -----------------------------
  </code></pre>
  
  <p>I have tried different combination of col-sm-push/pull-x and col-xs-push/pull-x, but none of them have produced the desired output. I kept getting the columns overlapped on top of each other on big screens, instead of nicely beneath each other on smaller screens as intended. How can I achieve the right layout on small screens?</p>