Как сохранить Divs от перекрытия

Question

Я хочу, чтобы контейнер 2 всегда находился под контейнером 1, но за пределами «фона» div. Я могу сделать это с широким экраном, но когда экран сужается. контейнер2 плавает поверх контейнера1. Как сохранить контейнер2 ниже?

css container1 и container2 оба имеют значения css из класса загрузочного контейнера twitter. Я просто добавил 1 и 2, чтобы объяснить, что мне нужно.

<div class="Background"> 
    <div class="container1"> 
     <div class="row "> 
     <h1></h1> 
     </div> 
     <div class="row "> 
     <div> 
     </div> 
     </div>  
    </div> 
</div> 
<div class="container2"> 
</div> 

CSS

.Background{ 
height: 250px; 
color: #cccccc; 
} 
.container { 
padding-right: 15px; 
padding-left: 15px; 
margin-right: auto; 
margin-left: auto; 
} 

Answer 1

Если вы хотите другой макет на разных экранах, вы должны использовать медиа-запрос:

Вы можете использовать абсолютное позиционирование на небольшом экране, чтобы потянуть второй контейнер над первый. Вы должны окружить их обоих в DIV с позиции: относительная применяется

@media (max-width: 600px) { 
    .container2 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 

Answer 2

Я не знаю, как это может повлиять на другие элементы разметки, но вы можете попробовать:

.Background,.container2{ 
    display :block // or inline-block with clearing floats 
} 

Также считают, что .container является предложил самый внешний элемент в бутстрап-сетке, чтобы вы могли либо установить фон в абсолютный (чтобы вывести его из потока), либо поместить его в контейнер1.