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

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

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

HTML

@H_403_8@

LEFT/BOTTOM

RIGHT/TOP

CSS

@H_403_8@.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;

}

}

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

@H_403_8@.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%;

}

}

@H_403_8@

RIGHT/TOP

LEFT/BOTTOM