Html 响应地堆叠div

我在一个有响应的网站上工作，当它在桌面/大屏幕上时，它将处于以下布局

标题

菜单

内容

然后当它出现在手机/小屏幕上时

标题

内容

菜单

你怎么能做到这一点？我所看到的示例似乎都使用绝对定位，但我希望它能够根据屏幕大小和大小/移动动态变化

---

谢谢

CSS无法重新排列HTML元素的顺序，这就是为什么在本例中使用绝对定位

---

或者，您可能需要一个以一种格式可见而非另一种格式可见的节的隐藏副本，反之亦然。

您可以使用CSS3flexbox

框方向：反向属性。这样写：

.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;
}
}

选中此项
它取决于视觉表现。如果您使用的是浮动，则可以通过将
float:left
更改为
float:right
来实现。