Call
608.845.2900
Visit
330 Locust Dr.
Verona, WI 53593
Message
info@powderkegwebdesign.com
NEED SOME GUIDANCE ON PLANNING A NEW WEBSITE?
Download our free guide!
Powderkeg Web Design
Menu
Message Us
Nick
Nick

Web Dev Tid Bit (WDTB): Reversing the Order of 2 Sibling Elements

March 15, 2017

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!

Nick
Nick
Senior Developer

Nick is an ambitious and versatile developer with a wide range of talents. He is an efficient coder that utilizes his resources in order to achieve both his and the clients’ goals. His Alma Mater is the University of Wisconsin – Stevens Point where he graduated with honors in Web and Digital Media Development.