响应式堆叠div

Question

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

1. 头部
2. 菜单
3. 内容

当它在手机/小屏幕上时，布局将会是：

1. 头部
2. 内容
3. 菜单

如何实现这个效果？我看到的例子似乎都使用了绝对定位，但我希望它可以根据屏幕大小和动态移动大小而自适应。

谢谢！

- alinitro

---

这取决于视觉表现。如果您正在使用浮动，您可以通过将 float:left 更改为 float:right 来实现。 - Nix

Answer 1

您可以使用CSS3的flexbox属性 box-direction: reverse;. 写作如下：

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/

- sandeep

Answer 2

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

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

- Diodeus - James MacFarlane