Blog: Web Design
Man playing Jenga

How To Responsively Rearrange Elements With CSS

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

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”.

Did this help you out? If so, take a second to tweet this out!

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

6 comments on “How To Responsively Rearrange Elements With CSS

  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.

  2. 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.

    1. 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: flex layout instead of table or default browser layout. When you hit a breakpoint, like the browser goes from desktop to mobile, you’d then change from flex-direction: column to flex-direction: column-reverse. (Or row to row-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.

Join the Conversation

Your email address will be kept private. Required fields marked *.