DIV 2 на верхней части DIV 1 при изменении размера

Question

Итак, вот как это выглядит, когда я нахожусь на полном экране: http://i.imgur.com/quQt09E.png
И это, как я хотел бы посмотреть, когда я изменить размер до определенного момента: http://i.imgur.com/pKGKoCq.png

Я могу только иметь div 1 поверх div 2. Я пробовал все, что знаю, но я боюсь, что мои знания немного ограничены, когда дело доходит до таких проблем. Я был бы очень признателен, если бы кто-нибудь мог мне помочь.

Answer 1

Я думаю, вы можете добиться того, что ищете, с помощью CSS-сетки, такой как Bootstrap. Проверьте следующее: скрипку http://jsfiddle.net/nunoarruda/156trje7/

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-sm-push-6 div2">DIV 2</div> 
     <div class="col-xs-12 col-sm-6 col-sm-pull-6 div1">DIV 1</div> 
    </div> 
</div> 

Я использовал CSS сетку Bootstrap и Тяни/Толкай классов, чтобы изменить порядок столбцов, начиная от небольших (см) экранами. Вы можете изменить его на средний (md) или больше. Проверьте документацию на Bootstrap: http://getbootstrap.com/css/#grid-column-ordering

Answer 2

AS i see есть серый прямоугольник под div2. Это побуждает меня к этому, что div 2 находится внутри div1. Чтобы установить навсегда div2 сверху на div1, я бы использовал следующую схему:

1) Создайте общий div, это будет включать в себя два div внутри.

2) Создайте div2 внутри общего div с шириной 100% и высотой 50% от общего div.

3) сделайте то же самое с div1, но определите его ниже.

Таким образом, оба divs фиксируются в предыдущем разделе, в котором вы можете двигаться, как хотите.