How To Responsively Rearrange Elements With CSS
Responsive web design presents a number of layout challenges for developers. Sometimes, page content needs to be presented differently on desktop and mobile. If the order needs to be rearranged, what are the options?
It helps to remember that page elements are boxes within boxes, inside of a large box, the device window. If there is a section displayed on the bottom of the page on desktop, but we need it to be at the top of the page on mobile, how do we move that box without changing the HTML?
Things We Must Consider
Most web pages today are laid out using floats. Simply floating elements in a different order is not sufficient for changing the order in most cases. We could use flexbox, but older Internet Explorer, Android, and very old Safari (5.1) would be excluded. At the time of this writing, that would leave out about 20% of our potential users.
Absolute positioning is also a possible solution, so long as the size of our elements never change. If any elements we are moving around are going to change in size, or have different content within them, this is not a feasible solution.
We want to have the flexibility of changing our content without having the containers break.
Ironically, we can use display: table to move our elements wherever we need to on mobile. To give credit where it is due, a big thank you to James Tudsbury for originally explaining how to do this.
Rearranging Our Targeted Elements
Here’s the HTML we will use. A parent element with three child elements. The child elements appear in the order they are written in the source code.
<div class="parent">
<div class="child1">Child 1</div>
<div class="">Child 2</div>
<div class="child3">Child 3</div>
</div>
Now, the responsive CSS that rearranges these elements at a given breakpoint to a different order.
@media screen and (max-width: 768px) {
.parent {
display: table;
}
.child1 {
display: table-footer-group;
}
.child3 {
display: table-header-group;
}
}
Under 768 pixels, the elements will now display in the order of “Child 3”, “Child 2”, “Child 1”.
I greatly appreciate you taking the time to share this with other developers. There is always a balance between getting the function and flow you want and using CSS that will be compatible with the maximum number of people while also feeling like you aren’t “hacking it together”. This is the perfect solution for my current dilemma of desktop view vs mobile view for reordering items.
Hi Stephanie:
Thanks for taking time to leave a comment. Flexbox is another CSS technology you can now use to do this in nearly every browser.
Best of luck to you, Steven, and Mulan!
That’s awesome, thank you so much!
Thanks for stopping by, Cihan.
This is a great easy way to do it. But I have trouble with margins at resize, contained element to contained element and contained element to wrapper.
Hi Samul:
I really need to update this, as there are more versatile ways to get this done now. What I’ve been doing lately is using Flexbox, using the Flexibility polyfill to add support for older versions of Internet Explorer (All other browsers support Flex layouts).
The idea is to use a
display: flexlayout instead of table or default browser layout. When you hit a breakpoint, like the browser goes from desktop to mobile, you’d then change fromflex-direction: columntoflex-direction: column-reverse. (Orrowtorow-reverse).Something that helped understand the concepts of Flexbox layout was this: http://flexboxfroggy.com/.
CSS Grid is also going to revolutionize CSS layout. Browser support for Grid Layout is about 85%, but older IE is still a known issue.
I will put re-writing this page on my to-do list for the semi-near future.
Nice solution. There is also one more solution for this, where we can use css order property with display:flex. You can check here – https://www.digitfeast.com/2019/02/change-order-of-divs-using-css.html
Yes, updating this article to cover Flexbox is on my to-do list. Thanks for the reminder, Vijay!