CSS - Flexbox - Reorder content -- (e.g. Move sidebar under content if it's hardcoded above it in HTML)
<style> | |
@media (max-width: 800px) { | |
.container { | |
display: -webkit-box; | |
display: -moz-box; | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-moz-box-orient: vertical; | |
-webkit-flex-direction: column; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
} | |
.content { | |
-webkit-box-ordinal-group: 1; | |
-moz-box-ordinal-group: 1; | |
-ms-flex-order: 1; | |
-webkit-order: 1; | |
order: 1; | |
} | |
.sidebar { | |
-webkit-box-ordinal-group: 2; | |
-moz-box-ordinal-group: 2; | |
-ms-flex-order: 2; | |
-webkit-order: 2; | |
order: 2; | |
} | |
} | |
</style> | |
<div class="container"> | |
<div class="sidebar"></div> | |
<div class="content"></div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment