调整大小时 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 网格和 push/pull 类从小 (sm) 屏幕开始对列重新排序。您可以将其更改为中等 (md) 或更大。检查 Bootstrap 文档：http://getbootstrap.com/css/#grid-column-ordering

Answer 2

我看到 div2 下方有一个灰色矩形。这让我想到 div 2 在 div1 内。要在 div1 上永久设置 div2，我将使用以下架构：

1) 创建一个通用的div，这将包括两个div在里面。

2) 在 general div 中创建 div2，其宽度为 general div.

的 100%，高度为 general div.

的 50%

3) 与div1 相同，但定义如下。

这样两个 div 都固定在之前的 div 中，您可以随意移动。

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

DIV 2 on top of DIV 1 when resizing

html

css

media-queries