UPDATE: Having implemented the solution provided in the accepted answer below, I find myself back at square one with the original layout before any adjustments were made. The issue still remains unresolved. Any advice on how to achieve the desired design on smaller screens is greatly appreciated.
----------------------------
| Left Sidebar | |
------------------ Main |
| | |
| | |
| | |
| | |
| | |
-----------------|---------|
| Right |
------------------
In a fluid container (container-fluid), I am attempting to align three columns side by side within a single row. Despite my efforts all day, I have been unable to successfully adjust their positioning when the screen size changes.
The three columns are as follows:
1. Right sidebar
2. Left sidebar
3. Main
On larger screens, it should appear as:
------------------------------------------------
| Left sidebar | Main | Right Sidebar |
------------------------------------------------
While on smaller screens, the ideal arrangement would be:
----------------------------
| Left Sidebar | |
------------------ Main |
| Right Sidebar | |
----------------------------
The current display is as follows:
-----------------------------
| Left | Main |
| Sidebar ------------
| | Right |
| | sidebar |
-----------------------------
My attempts using various combinations of col-sm-push/pull-x and col-xs-push/pull-x have not yielded the desired outcome. Instead of neatly stacking beneath each other on smaller screens, the columns end up overlapping on top of each other on bigger screens. How can I rectify this to achieve the correct layout for small screens?