css - 更改响应式设计的 Div 顺序

Question

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

基本上当视口低于 XI 时，希望在页面底部显示菜单。

示例链接失效 - 我不再拥有的站点

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

V1：大于999px，你会看到左上角的红框，红框旁边的蓝框。

V2：在 600px 和 999px 之间，你会注意到红色框变小了，蓝色框现在位于红色框下方

v3：小于 600px，你会再次注意到红色框变小了，蓝色框现在变黄了。

基本上，在 V3 中，我想做现在的黄色盒子，坐在绿色盒子下面，灰色盒子上面

所以订单是红色盒子绿色盒子黄色盒子灰色盒子

除了讨厌的 hide old div，show new div hack（技术）或 JS 版本（远离 CSS Responsive）有没有办法移动这个。

CSS 在文件中，因此查看源代码会显示所有内容。

干杯

score 12 · Accepted Answer

老实说，我想不出单独在 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>

score 5 · Accepted Answer

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

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

}

score 2 · Accepted Answer

试试这个也许有帮助

    @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%;
        }

演示

score 2 · Accepted Answer

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

score 2 · Accepted Answer

是的，更改容器中 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>

score 1 · Accepted Answer

尝试创建两个 div，一个在页脚中，一个在页眉中，当屏幕小于 X 时，“display:none”底部的一个。

score 0 · Accepted Answer

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

你可以做的是：

direction: rtl;在您的父容器上：.container { direction: rtl; }
在直接孩子上将其重置为正常：.container > * { direction: ltr; }
更改 HTML 中 div 的顺序，以便在桌面版本上以正确的顺序显示内容

这适用于每个浏览器，因为到处都支持此属性（从 IE 5.5...）。

score 0 · Accepted Answer

使用 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"));
       }
   }

score 0 · Accepted Answer

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

然后你可以做类似的事情

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

你可以在这里得到它：https ://jacoblett.github.io/IfBreakpoint/

css - 更改响应式设计的 Div 顺序

9 回答 9

Related

Reference