How to Change the Order of GenerateBlocks Columns on Mobile (Image Below Content)

How to Change the Order of GenerateBlocks Columns on Mobile (Image Below Content)

Sometimes a two-column section looks perfect on desktop but needs a different order on mobile. For example, you may want the text to appear before the image.

This guide explains how to change the order of GenerateBlocks containers for mobile devices.

Method 1 – Using the Built-in Order Setting (Recommended)

If your parent container uses Flex Layout, GenerateBlocks provides an Order option.

Step 1

Open the Block Editor and select the Left Container (Image).

Step 2

Navigate to:

Styles → Layout → Order

Step 3

Click the Mobile (📱) responsive icon beside Order.

Set:

Step 4

Now select the Right Container (Content).

Again go to:

Styles → Layout → Order

Set:

Result

Desktop

Image        Content

Mobile

Content

Image

Method 2 – When Using CSS Grid

If your parent container uses CSS Grid instead of Flex, the Order option may not be available.

In that case use custom CSS.

Step 1

Select the Image container.

Add the CSS Class:

mobile-order-2

Step 2

Select the Content container.

Add the CSS Class:

mobile-order-1

Step 3

Add the following CSS:

@media (max-width:767px){

.mobile-order-1{
    order:1;
}

.mobile-order-2{
    order:2;
}

}

Important Note

The CSS above works only when the parent container is using Flex Layout.

If the parent uses CSS Grid, the order property does not reliably change the visual position of grid items.

Recommended Alternative for CSS Grid

If your GenerateBlocks section uses:

display:grid;
grid-template-columns:48% 52%;

it is usually better to keep the original order and instead optimize the mobile layout by:

• Removing fixed widths
• Removing large left/right margins
• Using width:100%
• Setting max-width:100%
• Increasing vertical spacing
• Making buttons full width
• Stacking feature cards for smaller screens

This approach produces a cleaner and more consistent mobile experience while avoiding layout issues caused by changing the order of grid items.