Responsive 2 column staggered layout client expectations vs reality problem

In a bit of an urgent bummer at the problem, we developed and delivered a Wordpress site with blog post layouts that are split in 2 columns via Gutenberg built in columns, on desktop, the site appears like a magazine, where users read items from left col to right, and then left to right again, as per the numbering on my attached diagram.

However in mobile, as per usual, one entire column would stack on the other one, hence the order is off.

Is there a way to actually pull this off? To have that ordered content in a wordpress blog post and be able to allow client to create those posts in the CMS.

I know the obvious method would be masonry layouts, but to my knowledge, no theme/plugin allows you to enter blog posts with a mixed media in ordered masonry blocks.

In a bit of an urgent bummer at the problem, we developed and delivered a Wordpress site with blog post layouts that are split in 2 columns via Gutenberg built in columns, on desktop, the site appears like a magazine, where users read items from left col to right, and then left to right again, as per the numbering on my attached diagram.

However in mobile, as per usual, one entire column would stack on the other one, hence the order is off.

Is there a way to actually pull this off? To have that ordered content in a wordpress blog post and be able to allow client to create those posts in the CMS.

I know the obvious method would be masonry layouts, but to my knowledge, no theme/plugin allows you to enter blog posts with a mixed media in ordered masonry blocks.

• responsive

Share Improve this question edited Mar 18, 2019 at 5:37 Winterain asked Mar 18, 2019 at 3:08 WinterainWinterain 12133 bronze badges 8

• I recall seeing something in CSS that allows for reordering of specific divs - pulling one ahead of another... maybe in Bootstrap or could have been CSS3 flex. I can't recall the details, but this post might help: https://wordpress.stackexchange/a/179419/160457 – jsmod Commented Mar 18, 2019 at 3:28
• yeah for flex, it's the order property. In fact, in bootstrap you can even target specific order for specific breakpoints. Thing is I can't really enter the content in such a way within Wordpress.. If it were a standalone landing page, no problem. – Winterain Commented Mar 18, 2019 at 5:08
• Why can't it be incorporated in the WordPress loop? – jsmod Commented Mar 18, 2019 at 5:19
• coz this is for a blog post article.. as in the actual post content. Not listing out posts. – Winterain Commented Mar 18, 2019 at 5:31
• added a screenshot of the actual page that has been realised now, replaced with dummy content. – Winterain Commented Mar 18, 2019 at 5:39

 |  Show 3 more comments

1 Answer 1

Sorted by: Reset to default 1

I've implemented a working solution for now, which is to input everything as a 'flat' no column post, this way the 'flow' of the content when the client is entering is exactly how it would be on mobile.

On Desktop, I apply width:50% and masonry plugin to all direct child elements of the post-body container.

On Mobile breakpoints in CSS, I make the child elements width 100%.

It's working well for now, although as usual, certain combinations of block heights might result in unexpected layouts.