我有三列,订购1,2,3.
1
2
3
CSS
.flex-container {
display: flex;
}
.item {
background: orange;
padding: 10px auto;
color: #fff;
font-family: arial;
flex-grow: 100;
flex-shrink: 50;
text-align: center;
}
.first {
order: 1;
}
.second {
order: 2;
}
.third {
order: 3;
}
切换到移动屏幕列时我想要的是这样的显示;
1 3
2
媒体查询
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
.second {
order: 3;
/* And go to second line */
}
.third {
order: 2;
}
}
第二列应移至下一行.
我怎样才能做到这一点?