Web Dev Tid Bit (WDTB): Reversing the Order of 2 Sibling Elements
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:
<style>
* { box-sizing:border-box; margin:0; padding:0; }
hr { margin-bottom:40px; }
p { margin-bottom:20px; }
.container { padding:0 15px; margin:auto; max-width:1170px; width:100%; }
.row { margin:0 -15px; }
.info { float:left; padding:0 15px; width:50%; }
.img { float:left; padding:0 15px; text-align:right; width:50%; }
</style>
<div style="margin-top:100px;"></div>
<div class="container">
<hr />
<div class="row">
<div class="wrap">
<div class="info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed aliquet augue. Pellentesque iaculis quis urna porta sollicitudin. Donec ex odio, molestie nec condimentum eu, auctor vitae enim. Aliquam sed neque auctor tortor posuere dignissim eget ut felis. Morbi sodales tincidunt porttitor. Aliquam interdum sed lacus non tincidunt. Nullam in facilisis diam. Aenean sodales ut velit consequat consectetur. Suspendisse at arcu est. Morbi blandit justo sed dui blandit euismod.</p>
<p>Cras vehicula condimentum luctus. Sed commodo nisi a augue tempor lobortis. Nam elit libero, imperdiet eu rutrum aliquet, vehicula id ante. Sed dui arcu, lobortis non ipsum dignissim, placerat auctor erat. Nullam ac dapibus diam. In cursus massa ut nulla volutpat ultricies. Integer ultrices, arcu sit amet feugiat efficitur, nunc tellus pellentesque mauris, quis auctor nisi quam non neque. Sed sit amet diam a mauris bibendum semper. Sed tincidunt risus eget tristique dignissim. Praesent a eros sagittis, accumsan velit et, laoreet velit. Curabitur in tellus sem. Aliquam viverra consequat vestibulum. Sed non nisi dui.</p>
</div>
<div class="img">
<img alt="Cool Profile Pic" src="http://placehold.it/350?text=Profile+Pic" />
</div>
</div>
</div>
</div>
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:
<style>
* { box-sizing:border-box; margin:0; padding:0; }
hr { margin-bottom:40px; }
p { margin-bottom:20px; }
.container { padding:0 15px; margin:auto; max-width:1170px; width:100%; }
.row { margin:0 -15px; }
.info { float:left; padding:0 15px; width:50%; }
.img { float:left; padding:0 15px; text-align:right; width:50%; }
@media (max-width:800px) {
.wrap { display:table; }
.info { display:table-footer-group; float:none; width:100%; }
.img { display:table-header-group; float:none; text-align:center; width:100% }
.img img { margin-bottom:20px; }
.row { margin:0; }
}
</style>
<div style="margin-top:100px;"></div>
<div class="container">
<hr />
<div class="row">
<div class="wrap">
<div class="info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed aliquet augue. Pellentesque iaculis quis urna porta sollicitudin. Donec ex odio, molestie nec condimentum eu, auctor vitae enim. Aliquam sed neque auctor tortor posuere dignissim eget ut felis. Morbi sodales tincidunt porttitor. Aliquam interdum sed lacus non tincidunt. Nullam in facilisis diam. Aenean sodales ut velit consequat consectetur. Suspendisse at arcu est. Morbi blandit justo sed dui blandit euismod.</p>
<p>Cras vehicula condimentum luctus. Sed commodo nisi a augue tempor lobortis. Nam elit libero, imperdiet eu rutrum aliquet, vehicula id ante. Sed dui arcu, lobortis non ipsum dignissim, placerat auctor erat. Nullam ac dapibus diam. In cursus massa ut nulla volutpat ultricies. Integer ultrices, arcu sit amet feugiat efficitur, nunc tellus pellentesque mauris, quis auctor nisi quam non neque. Sed sit amet diam a mauris bibendum semper. Sed tincidunt risus eget tristique dignissim. Praesent a eros sagittis, accumsan velit et, laoreet velit. Curabitur in tellus sem. Aliquam viverra consequat vestibulum. Sed non nisi dui.</p>
</div>
<div class="img">
<img alt="Cool Profile Pic" src="http://placehold.it/350?text=Profile+Pic" />
</div>
</div>
</div>
</div>
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!
