上一篇: html – 我可以在较小的屏幕上将... 下一篇:haskell – 为Data.Text序列化实...

html – 如何颠倒媒体查询中元素的顺序？

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – 如何颠倒媒体查询中元素的顺序？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有两个div,左边和右边,但是当屏幕小于例如500px时,左边的div变成底部div而右边的div变成顶部div,DOM中的div首先显示为第二个和第二个div.

我使用display：flex,然后divs反转但显示内联并忽略100％宽度.怎么了？

HTML

<div class='nav'>
    <div class='container'>
        <div class='lefT_Bottom'>
            LEFT/BOTTOM
        </div>
        <div class='right_top'>
            RIGHT/TOP
        </div>
    </div>
</div>

CSS

.nav{
    BACkground-color: red;
}
.container{
    width: 100%;
}
.lefT_Bottom{
    padding: 15px 0 15px 0;
    BACkground-color: green;
    float: left;
    width: 33.33%;
    text-align: center;
}
.right_top{
    padding: 15px 0 15px 0;
    BACkground-color: blue;
    float: right;
    width: 66.66%;
    text-align: center;
}
@media (max-width: 500pX){
    .lefT_Bottom{
        float: left;
        width: 100%;
    }
    .right_top{
        float: left;
        width: 100%;
    }
    .container{
        display: flex;
        flex-direction: row-reverse;
    } 
}

JS FIDDLE

解决方法

试试这个,它应该按你想要的方式工作.让我知道任何问题.

.nav{
    BACkground-color: red;
}
.container{
    width: 100%;
}
.lefT_Bottom{
    padding: 15px 0 15px 0;
    BACkground-color: green;
    float: left;
    width: 33.33%;
    text-align: center;
}
.right_top{
    padding: 15px 0 15px 0;
    BACkground-color: blue;
    float: right;
    width: 66.66%;
    text-align: center;
}
@media (max-width: 500pX)
    {
        .lefT_Bottom{
            float: left;
            width: 100%;
        }
        .right_top{
            float: left;
            width: 100%;
        }
        
    }

<div class='nav'>
        <div class='container'>
          <div class='right_top'>
                RIGHT/TOP
            </div>  
          <div class='lefT_Bottom'>
                LEFT/BOTTOM
            </div>
            
        </div>
    </div>