在响应式设计上更改Div顺序

Question

我正在创建一个响应式设计网站.

基本上当视口低于XI时,想要显示页面底部的菜单.

示例链接死亡 - 我不再拥有的网站

如果您调整浏览器窗口的大小,您会注意到3种不同的设计(基于最终目标设计而非设备类型)

V1:大于999px,您将看到红色框左上方,红色框旁边的蓝色框.

V2:介于600px和999px之间,您会注意到红色框变小,蓝色框现在位于红色框下方

v3:小于600px,您会再次注意到红色框变小,蓝色框现在变黄.

基本上,在V3中,我想制作现在的黄色方框,坐在绿色方框下方,灰色方框上方

所以订单是红盒绿箱黄盒灰盒

除了令人讨厌的隐藏旧的div,显示新的div hack(技术)或JS版本(远离CSS响应)是否有办法移动它.

CSS在文件中,因此视图源显示所有内容.

干杯

Answer 1

老实说,单凭CSS无法想到一种方法,但在jQuery中很容易实现,而不会破坏你的响应式设计.除了从#top-links div中删除margin-top之外,您的CSS不需要更改.

    <script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));

    function listenWidth( e ) {
        if($(window).width()<600)
        {
            $("#topLinks").remove().insertAfter($("#content"));
        } else {
            $("#topLinks").remove().insertBefore($("#content"));
        }
    }
</script>

Answer 2

我刚刚实施了一个解决方案

http://www.jtudsbury.com/thoughts/rearrange-div-order.php

使用display: table-header-group;和display: table-footer-group;

这是我的两个水平50%宽度框的示例,在缩小窗口宽度时切换到左上方框的右侧:

.box-container {
    display: table;
}

.box-50 {
    width: 50%;
    display: table-cell;
    padding: 0 20px;
}

@media only screen and (max-width : 700px) {

    .box-container {
        display: block;
    }
    .box-50 {
        display: block;
        width: 100%;
    }


    /* http://www.jtudsbury.com/thoughts/rearrange-div-order.php */
    .box-50.left {
        display: table-footer-group;
    }

    .box-50.right {
        display: table-header-group;
    }

}