# Reverse Column Order on Phones

> Flips the stacking order of a Columns block with the class "wpide-reverse-mobile" on phones, so an image placed on the right appears above its text instead of below.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: columns, mobile, layout, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-reverse-columns-mobile/

## Code

```css
@media (max-width: 781px) {
    .wp-block-columns.wpide-reverse-mobile {
        flex-direction: column-reverse;
    }
}
```

## Notes

Add wpide-reverse-mobile to the Columns block's Additional CSS class(es). Desktop order stays the same.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Reverse Column Order on Phones" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/