Bootstrap之底层媒体查询

标签：margin   max   wrap   box   back   dia   direct   order   child   

<style>
@media only screen and (min-width:1024px ) {
#box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.inner{
width: 100px;
height: 100px;
background: #8a4182;
margin: 10px;

}
.inner:nth-child(5){
order: -1;
}
}
@media only screen and (min-width:640px) and (max-width:1023px) {
#box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.inner{
width: 100px;
height: 100px;
background: blue;
margin: 10px;
}
.inner:nth-child(5){
order: -1;
}
}
@media only screen and (min-width:320px) and (max-width:639px) {
#box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.inner{
width: 100px;
height: 100px;
background: green;
margin: 10px;
}
.inner:nth-child(5){
order: -1;
}
}

Bootstrap之底层媒体查询

标签：margin   max   wrap   box   back   dia   direct   order   child   

原文地址：https://www.cnblogs.com/iWaitYou/p/9433839.html