Bootstrap: Responsive sidebar pulls

Question

I've tried to achieve this a long time, but I just cannot figure it out. I have a 3-6-3 grid that I want to alter in a responsive manner to a two col grid like 4-8 where both sides or only on one side.

Example

The numbers are bootstrap 3.0 Grid spans in default 12 Grid system

What it looks on big screens:

3: sidebar-left

6: content

3: sidebar-right

----------------------------------------------------
|   Sidebar-Left  |  Content      |  Sidebar-right |
----------------------------------------------------

What it should look like on smaller screens:

4: sidebar-left

8: content

4: sidebar-right

---------------------------------------------------
|  Sidebar-Left   |                               |
|------------------             Content
|  Sidebar-right  |                               |
---------------------------------------------------

What it looks like now: http://www.bootply.com/127177

Is this possible anyway. I think the sidebar right should move in a responsive manner into a new row somehow...

Any help here would be awesome.

Answer 1

You can do this by setting a float : right property on the content div, and using a media query to reset it to left in larger screen sizes. Here's a fiddle.

html

  <div class ='container'>
        <div class ='row'>
            <div class ='col-md-3 col-xs-4'></div>
            <div class = 'col-md-6 col-xs-8 floater'></div>
            <div class ='col-md-3 col-xs-4'></div>
      </div>
  </div>

css

.floater {
  float: right;
  }
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) { 
  .floater {
      float: left;
 }