Sometimes you need to change the order that items appear on the page for responsiveness. If you have 2 items that work well in their order on one screen size, but should be reversed on another – check this out:

Let’s say you have a profile page with some info on the left and a profile picture on the right:

The Markup:

This is pretty simple stuff – we have 2 divs that are taking up 50% of their container and floated left. Let’s say that the designer wants the profile picture to be above the info on a small screen size though. The profile picture div comes after the info div so it appears it will be tricky. You don’t want to get too hacky with “position:absolute” and absolute sizing since that is just silly coding, so what do you do?

One answer is to fall back to our more primitive web development days with… TABLES.

Not the table element itself, but rather the css properties that are available that mimic table behavior. Specifically we are going to work with display:table-header-group and display:table-footer-group. Basically as long as the parent has a display:table you can give the item you want on top the display:table-header-group styling and the item you want on the bottom the display:table-footer-group styling:

The Markup:

The new styling is everything found within the media query call “@media (max-width:800px)”. Without┬áthe new display settings with the table properties you would be left with the image stuck underneath the info:

It seems pretty trivial but if you develop with mobile in mind you’ll realize something like a bio page where all text information about a famous person is shown first with the image way at the bottom is bad user experience.

There are certainly other different / creative ways to accomplish this, but essentially changing 3 display css properties seems like the simplest solution to me!