响应地堆叠div

Question

我正在开发一个响应式网站，当它在桌面/大屏幕上时，它将采用以下布局。

1. 标题
2. 菜单
3. 内容

然后当它在手机/小屏幕时，它将是

1. 标题
2. 内容
3. 菜单

怎么办呢？我见过的例子似乎都使用绝对定位，但我希望它能够动态调整屏幕大小和动态大小/移动。

谢谢！

Answer 1

您可以使用CSS3 flexbox box-direction: reverse;属性。写得像这样：

.flex{
    display: -moz-box;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    display: -webkit-box;
    box-orient:vertical;
    display:box;
    width:100%;
}
.flex div, .header{
    border:1px solid red;
    height:100px;    
}


@media screen and (max-width : 400px){
    .flex{
    -moz-box-direction: reverse;
    -webkit-box-direction: reverse;
    box-direction: reverse;
}
}

选中此http://jsfiddle.net/Hj5pz/

Answer 2

CSS无法重新排列HTML元素的顺序，这就是在这种情况下使用绝对定位的原因。

或者，您可能需要隐藏一个以一种格式显示的部分的副本，而不是另一种格式，反之亦然。