Bootstrap css: aligning columns on small screens

Question

EDIT: 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.

----------------------------
|  Left Sidebar  |         |
------------------  Main   |
|                |         |
|                |         |
|                |         |
|                |         |
|                |         |
-----------------|---------|            
|  Right         |
------------------

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.

1: right sidebar

2: left sidebar

3: main

What it looks on big screens:

------------------------------------------------
|   Left sidebar  |      Main      |  Right Sidebar |
------------------------------------------------

What it should look like on smaller screens:

----------------------------
|  Left Sidebar  |         |
------------------  Main   |
|  Right Sidebar |         |
----------------------------

What it looks like now:

-----------------------------
|  Left          |  Main    |
|  Sidebar       ------------
|                |  Right   |
|                | sidebar  |
-----------------------------

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?

Answer 1

Check out this bootply. I used containers and panels since they look much cleaner. Read about panels and grid i used here. Read about hiding divs here:

<div class="container">
<div class="row">
    <div class="col-sm-8 col-md-4 hidden-xs">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">left</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">main</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
    <div class="col-sm-8 col-md-4 hidden-xs">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">right</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
</div>

Preview Large

Preview Small

First you make a row that will contain all your columns of equal width (col-md-4) where col indicated column, md indicates when the width will be seen in terms of screen size (Desktops (≥992px)), and the width with the max being 12. Next you do the same for a different size screen (sm ≥768px), and choose the width for the resized panels. For hiding panels and divs at a certain resolution, bootstrap uses hidden-SCREENSIZE so we add hidden-xs to the left and right panels.