<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之底层媒体查询
原创mb6100f4ef45bc6 博主文章分类:BootStrap Ui ©著作权
©著作权归作者所有:来自51CTO博客作者mb6100f4ef45bc6的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:Bootstrap 字体与图标
下一篇:Jquery Live方法
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
bootstrap~~媒体查询兼容IE
媒体查询兼容IE
媒体查询兼容IE -
CSS:媒体查询
媒体查询
媒体查询 html css -
媒体查询 200304
媒体查询语法例子变色的屏
媒体查询 it -
ios 媒体查询 媒体查询设置
1媒体查询:由设备类型、监测设备特性表达式构成。 语法: @media 设备类型[all\screen] and (条件表达式){ &nb
ios 媒体查询 html ios safari