Как сделать divs стек под друг друга, когда размер окна уменьшается пользователем?

Question

Пример: Bootstrap website Ctrl + F "Вложенные столбцы". При достаточно широком окне оба столбца уровня 2 находятся рядом друг с другом, но уменьшают размер, поэтому они не подходят больше, они хорошо прилегают друг к другу. Как я могу это сделать?

У меня почти идентичная компоновка, за исключением того, что у меня есть несколько divs stacked и 1 боковая панель, расположенная справа. Что-то вроде этого:

<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> 

я могу сжать его вместе, как мне нравится, и все работает, но как ширина окна получает снижается Я хочу, чтобы боковая панель, чтобы стек поверх коробки дивы, как и в начальной загрузки, например. Если я уменьшу ширину окна, боковая панель пойдет вверх по divs, но она по-прежнему плавает вправо и просто выглядит сломанной.

Answer 1

Что вы хотите, это, вероятно, медиа-запросы.

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

Е.Г.

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

С выше коде CSS вы разместите правила CSS, которые вы хотите вступить в игру для устройств с разрешением 768px или ниже.