Question

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

基本上当视口小于X时，我想在页面底部显示菜单。

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

如果您调整浏览器窗口的大小，您会注意到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;
    }

}

Answer 3

试试这个可能有帮助的

    @media (min-width:1px) and (max-width:599px) {
        #pageFrame {
            width:100%;

        }
        #logo {
            margin:0 auto;
            width:50px;
            height:50px;
        }
        #topLinks {
            position:absolute;
             top:250px;
            float:right;
            width:100%;
            background-color:yellow;

        }
        #content {
            position:absolute;
            top:100px;
            clear:none;
            float:left;
            width:100%;
        }
        #footer {
            position:absolute;
            top:350px;        
            clear:both;
            width:100%;
        }

DEMO

Answer 4

Flex-Box是您正在寻找的答案。退房（此链接现已中断 - http://www.jordanm.co.uk/lab/contentchoreography）以获取所有Flexbox功能的完整说明https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

是的，更改容器中div的顺序非常简单。请查看我正在使用的HTML css代码。

<html>
    <head>
        <style type="text/css">
            #nav_bar{
                width:100%;
                height:50px;
                background:red;
            }
            #container{
                width:100%;
                height:500px;
            }

            #left_panel {
                position:relative;
                float:left;
                width:250px;
                border:0px solid black;
                background:#ccc;
                height:100%;
            }
            #right_panel{
                width:100%;
                background:#666;
                height:100%;
            }
            #inner_container{
                height:100%;    
            }
            .center {
                margin-left: auto;
                margin-right: auto;
                width: 40%;
                padding-top:50px;
            }
            .data_container{
                border:1px solid black;
                float:left;
                position:relative;
                padding:10px;
            }
            #footer{
                width:100%;
                height:50px;
                background:blue;
            }
            @media all and (max-width: 700px) {
                #container {
                    width: 100%; 
                    height: 500px;
                    display: flex;
                    flex-flow: column-reverse ;
                }
                #left_panel {
                    width:100%;
                    height:200px;
                }
                #right_panel{
                    width:100%;
                    height:300px;
                }
            }
        </style>
    </head>
    <body>
        <div id="nav_bar">Nav</div>
        <div id="container">
            <div id="left_panel">
                <div class="center">
                    Left Panel content
                </div>
            </div>
            <div id="right_panel">
                <div id="inner_container" class="center">
                    <div class="data_container">
                        Action Item 1
                    </div>
                    <div class="data_container">
                        Action Item 2
                    </div>
                    <div class="data_container">
                        Action Item 3
                    </div>
                </div>
            </div>  
        </div>
        <div id="footer">Footer</div>
    </body>
</html>

Answer 6

尝试在页脚中创建两个div，在页眉中创建一个div，＆＃34; display：none＆＃34;当屏幕较小时，底部的一个显示它。

Answer 7

您应该查看direction css属性。 https://developer.mozilla.org/en-US/docs/Web/CSS/direction

你能做的是：

direction: rtl;：.container { direction: rtl; }
直接子项重置为正常：.container > * { direction: ltr; }
更改HTML中div的顺序，以便在桌面版

这适用于所有浏览器，因为所有地方都支持此属性（来自IE 5.5 ......）。

Answer 8

使用EventListener和matchMedia：

 //on load
 responsive_change_box_order();
 //on resize
 window.addEventListener('resize', responsive_change_box_order );

 function responsive_change_box_order() {
       if (window.matchMedia("(max-width: 1118px)").matches) {
           jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
       }
       else{
           jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
       }
   }

Answer 9

如果您使用的是Bootstrap 4，我创建了一个简单的插件来检查当前的媒体查询断点，然后将其设置为变量。

然后您可以执行类似

的操作

  if ( xs == true ) { 
    $("#topLinks").remove().insertAfter($("#content"));
  }

您可以在此处获取：https://jacoblett.github.io/IfBreakpoint/

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

9 个答案: