1

I am relatively new to using the Twitter Bootstrap 2, as I have only ever used Foundation. One thing that I cannot figure out how to do is to control stacking on smaller resolutions.

I have a three column layout I am using, two sidebars and the content area. Looks like so:

| Sidebar 1 |   |   Content     |   | Sidebar 2 |

On a smaller resolution however, I want the columns to stack like so:

|  Content  |
| Sidebar 1 |
| Sidebar 2 |

The only way I see to control such stacking in Bootstrap is by the use of pull-left or pull-right. Is there a better way, or is it even possible to do this with in Bootstrap?

Thanks!

Florent
  • 12,310
  • 10
  • 49
  • 58
Aj Troxell
  • 265
  • 1
  • 4
  • 16

2 Answers2

1

There isn't a mechanism built into Bootstrap to control stacking order - elements will stack in the order they appear in the HTML.
If .pull-left and .pull-right are achieving the behavior you want, that's probably your best bet without resorting to JavaScript.

Sara
  • 8,222
  • 1
  • 37
  • 52
  • The problem is that they are not working. Unless im just being dense and cannot get them to place properly in desktop view. Is there a way to arrange the html: CONTENT, SIDEBAR 1, SIDEBAR 2, but have the sidebar 1 float to the left of the content? – Aj Troxell Oct 17 '12 at 19:38
  • Can you put your code in a [jsFiddle](http://jsfiddle.net/) so I can test it out? – Sara Oct 17 '12 at 19:54
1

I was just figuring out how to do the same thing, and here is the code:

<div class="container">
  <div class="row">
    <div class="span9">
      <div class="row">
        <div class="span6 pull-right">Content</div>
        <div class="span3 pull-left">Sidebar 1</div>
      </div>
    </div>
    <div class="span3">Sidebar 2</div>
  </div>
</div>

I used this same bag of "tricks" in my Blueprint CSS Class, but have just recently converted to Bootstrap and am converting things over. Sorry, I'm a little late.

Kyle Gadd
  • 501
  • 4
  • 5