shortcode - Reorder content with CSS Flexbox

05 June, 2018

Ever had a situation where you have elements side by side on desktop, but they stack in the wrong order on mobile? Maybe the image should be above the title, or vice versa. Move the image (or any element) under content if it's hardcoded above it in HTML using this bit of CSS Flexbox magic:

@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;
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>

The code works by hard-coding the "order" property, which flexbox uses to determine the order the elements should be displayed. We only hard-code it on mobile, using CSS Media Queries.

Hope that helps, Ryo


๐Ÿ”— This post was filed under

Blue square avatar white centered hiragana text reading Ryosuke

@Ryosuke2 years ago