Change column order on mobile in WordPress

Make a section narrower on one screen than another, stack columns earlier, put two on a row on tablets, or swap the order on phones.

Get Grinner free

See it live

Type

An upgrade to Group and Columns

Find it

Block settings, Responsive

Phones

Reorders on phones only

Speed

Layout only, nothing moves

Live demo

Picture first on every screen.

This is the real Per-screen width and order setting, running on this page.

Recipe of the week

Warm lattice pie

Rub the butter into the flour until it looks like breadcrumbs.
Add cold water, bring it together and chill for half an hour.
Line the dish, then pile in the sliced fruit and sugar.
Weave a lattice on top, brush with milk and bake for 45 minutes.

Per-screen width and order example, a steaming lattice-topped pie on a cream plate, on a lilac background

Settings Reverse order on mobile on Stack at Two columns on tablet

What you can change

The settings worth knowing.

Widths per screen, when to stack and what comes first on phones.

240px on desktop, full width on tablet

Desktop

A width per screen

Set the largest width for desktop, tablet and mobile separately. Phones never inherit desktop.

1

2

3

4

Stack at

When to stack

Stack on mobile, on tablet and mobile, or two to a row on tablet first.

Pie night

Text first on desktop, second on a phone.

Per-screen width and order example, a steaming lattice-topped pie on a plate

Reverse order on mobile

Flip on phones

The last column comes first once columns stack on a phone.

1

2

3

Mobile order

Any order

Give each Column, or each block in a Grid, its own place on phones, from 1 to 12.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Select your Columns

Or a Grid, for per-item phone order.

3

Set widths and order

In Responsive, choose when to stack and the order on phones, then publish.

Good to know

Fair questions.

It is a Grinner upgrade to Group and Columns. You can make a section narrower on one screen than another, stack columns earlier, put two on a row on tablets, or swap the order on phones. Use it so a layout reads in the right order on every screen.

No, it’s a maximum. For an exact width, use WordPress’s own width and minimum width, or give a Group an Aspect ratio for a fixed shape.

No. The swap is visual only, so the reading order stays as built.

No. Reordering happens on phones only, even when columns stack on tablet.

The first twelve.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

Studio-quality design
Built for speed
Pay once, no subscription

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All layout and cards features