Question

For an example on Bootstrap website
Ctrl +F “Nesting Columns”. With a wide enough window both of the Level 2 columns are next to each other, but reducing the size so they don’t fit anymore they nicely snug under each other. How can I do this?

I have an almost identical layout, except I have several divs stacked and 1 sidebar floated to the right. Something like this:

<div id="container">  //Width: 96%; margin: auto; max-width: 870px; 
  <div id="sidebar">Sidebar</div>  //Floated to the right and "width: 26%;"
  <div id="box1">Box 1</div>  //Width: 68%; for every box# id
  <div id="box2">Box 2</div>
  <div id="box3">Box 3</div>
</div>

I can squeeze it together as I please and everything works, but as the width of the window gets reduced I want the sidebar to stack on top of the box divs like in the bootstrap example. If I reduce the width of the window the sidebar goes on top of the divs, but it is still floated to the right and just looks broken.

Answer 1

What you want is probably media queries.

http://www.w3.org/TR/css3-mediaqueries/

E.G.

@media screen and (max-width: 768px) {
    // insert css rules here
}

With the above CSS code you would place the CSS rules you want to come into play for devices with a resolution of 768px or below.