更改响应式设计的DIV顺序

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

基本上，当视图端口低于x时，我想在页面脚下显示菜单。

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

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

v1：大于999px，您会看到左上角，蓝色框，靠近红色框。

v2：在600px和999px之间，您会发现红色框变小，蓝色框现在位于红色框下

v3：少于600px，您会再次注意到红色盒子变小，蓝色盒子现在黄色。

基本上，在V3中，我想制作一个现在的黄色框，坐在绿色框下，灰色盒子上方

所以顺序进行红色盒子绿色盒子黄盒子灰色盒

除了令人讨厌的隐范旧div，显示新的Div Hack（技术）或JS版本（远离CSS响应式）有没有办法移动此。

css在文件中，因此查看源显示所有内容。

欢呼

老实说，我想不出一种单独在CSS中执行此操作的方法，但是它在jQuery中很容易就可以实现，而不会破坏您的响应式设计。您的CSS不需要更改，除了从＃top-linksdiv中删除保证金

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

我刚刚实现了

的解决方案

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

尝试一下可能有帮助的

    @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

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

flex-box是您要寻找的答案。请查看（此链接现在已断开-http：//www.jordanm.co.uk/lab/contentchoreshaphy），以供所有Flexbox的完整说明https://css-tricks.com/snippets/snippets/css/a----指南foxbox/

尝试在页脚中创建两个divs一个，一个在标题中"显示：无"屏幕少于x，然后x显示它。

您应该查看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 ...）。

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

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

您可以做

之类的事情

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

您可以在这里获取：https：//jacoblett.github.io/ifbreakpoint/

相关内容

最新更新

热门标签：