<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之底層媒體查詢