如何反转媒体查询中元素的顺序？ [英] How to reverse the order of elements in media queries?

问题描述

我有左右两个div，但是当屏幕小于（例如）500px时，左div变为底部div，右div变为顶部div，则DOM中的第一个div应该显示为第二个，第二个div显示为第一个。 p>

我使用显示：flex ，然后div反转，但显示内联并忽略100％宽度。怎么了？

HTML

 < div class ='nav'> 
< div class ='container'> 
< div class =’left_bottom’> 
左/底
< / div> 
< div class ='right_top'> 
 RIGHT / TOP 
< / div> 
< / div> 
< / div> 
  

CSS

  .nav {
 background-color：red; 
} 
 .container {
宽度：100％； 
} 
 .left_bottom {
 padding：15px 0 15px 0; 
 background-color：绿色； 
浮动：左； 
宽度：33.33％； 
 text-align：center; 
} 
 .right_top {
 padding：15px 0 15px 0; 
 background-color：蓝色； 
 float：正确； 
宽度：66.66％； 
 text-align：center; 
} 
 @media（最大宽度：500像素）{
 .left_bottom {
 float：left; 
宽度：100％； 
} 
 .right_top {
 float：left; 
宽度：100％； 
} 
 .container {
 display：flex; 
 flex-direction：行反向； 
} 
} 
  

JS字段

解决方案

尝试一下，应该按照您想要的方式工作。让我知道任何问题。

  .nav {background-color：red;}。container {width：100％;} .left_bottom {填充：15px 0 15px 0;背景颜色：绿色；向左飘浮;宽度：33.33％; text-align：center;}。right_top {padding：15px 0 15px 0;背景颜色：蓝色；浮动：正确；宽度：66.66％; text-align：居中；} @ media（最大宽度：500像素）{.left_bottom {float：左；宽度：100％; } .right_top {float：left;宽度：100％; }}  

 < div class ='nav'> < div class ='容器'> < div class ='right_top'> RIGHT / TOP< / div> < div class ='left_bottom'>左/底< / div> < / div> < / div>  

I have two divs, left and right, but when screen is less than for example 500px then left div become bottom div and right div becomes top div, div first in DOM should displays as second and second div as first.

I use display: flex, then divs are reversed but displays inline and ignore 100% width. What is wrong?

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

解决方案

Try this, it should work the way you wanted. let me know any issues.

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

这篇关于如何反转媒体查询中元素的顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！