The Staggered Layout Problem (Mobile Stacking Order)
Tags: webdev, css, html, antipattern
Published: 2019-12-02 08:58:19

## The Staggered Layout

Chances are you have seen the pervasive _staggered layout_ (a.k.a., zigzag) at least once. Maybe you even use it on your own site or a site you've built for someone else.

Let's take a 2x2 example&mdash;two rows two columns:

1. The first row has an image on the left and its text content on the right.
2. The second row has text on the left and its image on the right.

![Staggered Layout Design on Laptop or Desktop](https://thepracticaldev.s3.amazonaws.com/i/fgd45im023twpgp933yp.png "Staggered Layout Design on Laptop or Desktop")

Alternating images and text look nice. It breaks up _slabs_ of words. This design makes content more digestible and appealing. Until you view it on a phone.

### The Stacking Order Problem for Mobile Displays

Instead of neatly stacking: 

1. First row image.
2. First row text.
3. Second row image.
4. Second row text.

as one expects, we get this image/text _sandwich_ ([anti-pattern](https://en.wikipedia.org/wiki/Anti-pattern)) thingie:

1. First row image.
2. First row text.
3. Second row text.
4. Second row image.

Here's a visual of what I mean. Again, this gif demos what we *don't* want.

![Image Text Text Image Stacking Order](https://dev-to-uploads.s3.amazonaws.com/i/5jomxfwewa1sx1lpplmh.gif)

### Just to Summarise

The gif shows us what we **don't** want: image > text > text > image.

What we **do** want is image > text > image > text.

## One Attempt (Duplicating Content)

One way to solve this _sandwich_ problem (in WordPress) is to make a copy of the second (alternating) row. Next, switch the columns in the new copy (image on the left&mdash;text on the right like the first row). Then for mobile widths, use WordPress theme visibility settings to:

1. Hide the desktop version of the alternating row. This is the staggered version. 
2. Display the alternating row where we reversed columns. This is the extra stacked copy we created. 

This definitely achieves our goal to have _image > text > image > text_ stacking on a mobile.

You probably noticed&mdash;it's a bit of a _hack_. And, it creates **confusion** and duplicate content which means **duplicate work**. This is not so much an [SEO issue](https://medium.com/@marklchaves/stop-freaking-out-over-duplicate-content-7110165236f).

The alternative solutions I see out there use CSS **grid** or **flexbox** to control display order on mobile devices. Way cool! I think. Why do they fix the mobile display second as an _after thought_?

### A Little Ditty on Mobile First

Ok&mdash;hang on. I'd like to do one better. I want to make our solution **mobile-first**. Meaning, let's order things for the mobile display first, then rearrange things for wider displays. Not the other way around like the other solutions. This is a subtle yet important way of thinking.

Let's go!

## The Solution ([Vanilla](#vanilla), [Gutenberg](#gutenberg), [Avada](#avada), [Divi](#divi))

<a name="vanilla"></a>

### Vanilla HTML and CSS [<a href="#vanilla">#</a>]

Vanilla HTML and CSS means it's agnostic. I.e., no dependencies on CMSs (CloudCannon, WordPress, Squarespace, Wix) or JavaScript libraries. This particular solution use CSS **grid**. It's a fully working demo that shows the before/after. Please pay close attention to how I reverse the order in this snippet.

```css
/** 
 * Mobile First - The images are placed above the text by
 * default. 
 *
 * Only Re-order Columns for Larger Displays
 *
 * These two lines of code is where the rubber meets the road.
 * This only affects the second row where we will put the text
 * on the left and the image on the right.
 */
#section-h.grid div:nth-of-type(1) {
  order: 2; /* This is the image. Make it go to the right. */
}
#section-h.grid div:nth-of-type(2) {
  order: 1; /* This is the text. Make it go to the left. */
}
```

**Here's the CodePen.**

{% codepen https://codepen.io/marklchaves/pen/qBEWrWw default-tab=css,result %} 

Note: Please log in to your CodePen account to view if the pen doesn't show up at first.

<a name="gutenberg"></a>

### Gutenberg Block Editor [<a href="#gutenberg">#</a>]

Interjecting commentary: I admit. I was naive to assume Gutenberg had a nice built-in solution. Why doesn't it? It's the "new kid/latecomer" to the block (oops&mdash;no pun intended). Gutenberg has the advantage of looking at the weaknesses of all the other page builders. Oh well.

Let's take-on "The 'Berg".

#### Here's our *Staggered* Design in Gutenberg on a Large Display

![Staggered Design using Gutenberg DT View](https://thepracticaldev.s3.amazonaws.com/i/swsmlxmgyeeq5nj34zgo.png)

#### Here's the Before/After on a Mobile

Grab the handle and slide right and left to see the before (sandwich) and after (no sandwich).

{% codepen https://codepen.io/marklchaves/pen/QWwWyvq default-tab=result %} 

#### Here's the CSS

```css
/** 
 * Fix the Staggered Problem for Mobile Stacking Order 
 *
 * This is a mobile-first approach.
 */
@media all and (min-width: 767px) {
  .reverse-row {
    display: flex !important;
    flex-flow: wrap;
    flex-direction: row-reverse;
  }
}
```

#### Here's Where I Added the CSS 

![Add CSS to Appearance > Customize > Additional CSS](https://thepracticaldev.s3.amazonaws.com/i/1hsygjv2minr5htgqri8.png)

#### Here's Where to Hook the CSS Into the Alternating Second Row

![Applying the Custom CSS Class in Gutenberg](https://thepracticaldev.s3.amazonaws.com/i/jfa53rq02ippf6s9zxxg.jpg)

[How to add CSS to WordPress.](https://medium.com/@marklchaves/adding-custom-css-to-your-wordpress-website-how-to-guide-a50b474af36d)

<a name="avada"></a>

### Avada WordPress Theme [<a href="#avada">#</a>]

Besides the _obvious_ Fusion Builder classes, the CSS I used for my Avada solution is almost identical to the Gutenberg code. The main difference? I used an *ID* instead to specifically target the second (alternating) row.

#### CSS Used for Avada

```css
/** 
 * Fix the Staggered Problem for Mobile Stacking Order 
 *
 * This is a mobile-first approach.
 */
@media all and (min-width: 767px) {
  #reverse-cols1 .fusion-builder-row.fusion-row {
    display: flex !important;
    flex-flow: wrap;
    flex-direction: row-reverse;
  }
}
```

#### Here's the Full Avada Solution on GitHub (with Screen Grabs)

[Avada Solution](https://gist.github.com/marklchaves/aadd94aa13bd7e753031b4d54e948669)

<a name="divi"></a>

### Divi WordPress Theme [<a href="#divi">#</a>]

Last but not least. Below is an article I used to help me start solving the *stacking order* problem _sans_ duplicate content. [Jason Champagne](https://jasonchampagne.com/) shows how to solve the stacking _sandwich_ problem both ways&mdash;with duplicate blocks and without (pure CSS).

I *love* this article. It's well worth the read even if you aren't using Divi. Bookmark it!

[Divi Solution&mdash;See Option 2](https://www.elegantthemes.com/blog/divi-resources/how-to-change-divis-column-stacking-order-on-mobile-devices)

---

Leave me a comment if you have any questions.

Share & enjoy!

![mark l chaves freelance photographer writer web developer bali](https://marklchaves.files.wordpress.com/2020/01/mlc-site-icon-bw-57w.png "mark l chaves")