Reorder column blocks for mobile

Unfortunately the default columns block doesn’t provide such option out of the box, so you either need to find a block (plugin) that provides such columns or use custom CSS.

Here a guide on CSS flexbox – https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties

You need to set the columns parent element to display: flex; and flex-direction: column-reverse;

@imoptimal can you expand on your reply? I see two parts to rearranging columns on mobile: writing the CSS and placing it in WordPress.

My hunch is the CSS goes in style.css (tools > theme file editor), and the class goes in “additional css class(es) in the Gutenberg columns block.

I’ve tried a couple iterations of CSS.

@media (max-width: 782px) {
  .wp-block-column:first-child {
    order: 3;
  }
  .wp-block-column:nth-child(2) {
    order: 1;
  }
  .wp-block-column:nth-child(3) {
    order: 2;
  }
  .wp-block-column:nth-child(4) {
    order: 4;
  }

and

@media (max-width: 782px) {
  .wp-block-columns {
    flex-direction: column;
  }
  .wp-block-column:nth-child(1) {
    order: 2;
  }
  .wp-block-column:nth-child(2) {
    order: 1;
  }
}

I’ve use “wp-block-columns” and “wp-block-column” as classes. Nothing is working. I’m sure it’s my CSS, but it could be anything.

I’m truly shocked how hard it has been to find guidance with this. I’ve spent hours researching and trying. I thought reordering columns on mobile would be a very common need. Maybe everyone’s just using block plugins, themes, or page builders.

Thank you.

• This reply was modified 1 year, 1 month ago by brentrambo. Reason: left piece out