CSS
.flex{ display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; width: 80%; color: #fff; -webkit-flex-direction: column; -moz-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; } .flex > div{ text-align: center; line-height: 100px; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; } .flex > div:nth-child(1){ background: #D56354; } .flex > div:nth-child(2){ background: #D98848; } .flex > div:nth-child(3){ background: #E8B936; } .flex > div:nth-child(4){ background: #65BB62; } .flex > div:nth-child(5){ background: #418FD2; } @media screen and (max-width: 600px){ .flex > div:nth-child(1){ -webkit-order: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; } .flex > div:nth-child(2){ -webkit-order: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; } .flex > div:nth-child(3){ -webkit-order: 5; -moz-box-ordinal-group: 5; -ms-flex-order: 5; order: 5; } .flex > div:nth-child(4){ -webkit-order: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; } .flex > div:nth-child(5){ -webkit-order: 4; -moz-box-ordinal-group: 4; -ms-flex-order: 4; order: 4; } }
HTML
Lorem1Lorem2Lorem3Lorem4Lorem5
表示領域600px以下で順序変更
Lorem1
Lorem2
Lorem3
Lorem4
Lorem5