在桌面上并排响应布局，在移动设备上覆盖导航

Question

我正在寻找一个响应模式，我有两个并排的页面（或称之为div）

|--------|--------|
|        |        |
|  p1    |   p2   |
|        |        | 
|        |        | 
|--------|--------| 

当我缩小页面宽度或在移动设备上查看时，它会折叠到单个页面。 让我们说 - ＆gt;右上角显示了访问第二页的链接。

|--------|
|      ->|
|        |
|   p1   |
|        |
|--------|

类似于第二页，＆lt; - 返回第一页

|--------|
|<-      |
|        |
|   p2   |
|        |
|--------|

知道如何实现这一目标。是否有任何图书馆支持这一点，如bootstrap或基金会或这是“自己动手”。 ：）

谢谢，Lars

Answer 1

您可以通过使用CSS @media queries来实现这一目标：

JSFiddle - DEMO

＆＃13;

＆＃13;

.div {
    width:50%;
    height:100px;
    float:left;
}
.div-1 {
    background:red;
}
.div-2 {
    background:blue;
}
@media (max-width:480px) {
    .div {
        float:none;
        width:100%;
    }
}

＆＃13;

<div class="div div-1"></div>
<div class="div div-2"></div>

＆＃13;

＆＃13;

＆＃13;

[EDITED]

JSFiddle - DEMO

＆＃13;

＆＃13;

body {
    margin:0;
    overflow: hidden;
}
a {
    color:white;
    width: 100%;
    height: 100%;
    display: inline-block;
    font-size: 36px;
    line-height: 100px;
    text-align: center;
}
.div {
    width:50%;
    height:100px;
    float:left;
}
.div-1 {
    background:red;
}
.div-2 {
    background:blue;
}
@media (max-width:680px) {
    .div-p {
        width:200%;
    }
}

＆＃13;

<div class="div-p">
    <div id="div-1" class="div div-1">
        <a href="#div-2">Page 1</a>
    </div>
    <div id="div-2" class="div div-2">
        <a href="#div-1">Page 2</a>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;