When designing this website, I ran into a problem where I needed to order something differently on mobile. It was the blue ribbon on the blog page.
Ordering content differently across multiple screen sizes can be problematic. When using a grid framework it can be done with column pushes and pulls — but those feel hacky. You can change up your HTML source order and maybe some CSS rules to reorder that single component. Or you can use Flexbox.
For this website, I'm not too worried about browser coverage. But, if a good portion of my potential visitors were showing up as IE9 through analytics, I would probably reconsider using Flexbox.
In my case, a little Flexbox fixed everything.
.blog-posts-container{
display: flex;
flex-wrap: wrap;
.above-fold{
order: 2;
}
}
.blog-posts-ribbon{
order: 1;
}
A Metalsmith Website