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.

enter image description here

the problem

  • 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.com/a/179419/160457 – jsmod Mar 18 '19 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 Mar 18 '19 at 5:08
  • Why can't it be incorporated in the WordPress loop? – jsmod Mar 18 '19 at 5:19
  • coz this is for a blog post article.. as in the actual post content. Not listing out posts. – Winterain Mar 18 '19 at 5:31
  • added a screenshot of the actual page that has been realised now, replaced with dummy content. – Winterain Mar 18 '19 at 5:39

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.