html - 调整大小时 DIV 2 在 DIV 1 之上

Question

所以，这就是全屏时的样子:http://i.imgur.com/quQt09E.png
这就是当我调整到某个点时我希望看到的样子:http://i.imgur.com/pKGKoCq.png

我只能在 div 2 之上设置 div 1。我尝试了所有我知道的方法，但恐怕在涉及此类挑战时我的知识有点有限。如果有人能帮助我，我将不胜感激。

Answer 1

我认为您可以使用像 Bootstrap 那样的 CSS 网格来实现您正在寻找的东西。检查以下 fiddle :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>

我使用 Bootstrap CSS 网格和推/拉类从小 (sm) 屏幕开始对列重新排序。您可以将其更改为中等 (md) 或更大。检查 Bootstrap 文档:http://getbootstrap.com/css/#grid-column-ordering