Thursday , June 20 2024
Home > Magezon Extensions > Magezon Page Builder Tutorials > How to Reverse Column Order in Magezon Page Builder

How to Reverse Column Order in Magezon Page Builder

Reverse column order in Magezon Page Builder

Two-column layout is a popular and smart way to display your content, normally with image in one column and text in the other. This looks cool on desktop; however, the column order may get messed up when you switch to mobile view. 

Let me take an example for this. In Magezon Page Builder editor, we create 2 rows, each of which has 2 columns. In the first row, we have text in the first column and image in the second one. Meanwhile, in the second row, we have image in the first column and text in the second one.

Add 2 rows with 2 columns in each row
Image 1: Add 2 rows, each of which contains 2 columns

On the desktop, you’ll see the same layout as you can see in the image above. However, if you view on mobile, all columns are placed in a vertical order like this: text in the 1st row >> image in the 1st row >> image in the 2nd row >> text in the 2nd row.

Column order on mobile
Image 2: Column order on mobile mode

This order seems inconsistent and makes you somewhat confused which text comes with which image. It’d be better if you can reverse the stacking order of either the column pair in the first row or that in the second row, like this: 

Reversed column order on mobile
Image 3: Column order on mobile mode after reversed

Now you may wonder how to reverse the column order in the way as above. Fortunately, Magezon Page Builder supports this feature which allows you to quickly swap column order on mobile. Let’s see how!

Reverse Column Order in Magezon Page Builder

Taking the same example, in our drag and drop page editor, you add 2 rows, each of which has 2 columns. In the first row, you add text in the left column and image in the right column. In the second row, you add image in the left column and text in the right column. 

Add 2 rows with 2 columns in each row
Image 4: Add 2 rows, each of which contains 2 columns

If you aren’t clear about how to create multiple columns in Magezon Page Builder for Magento, please refer to this tutorial

Suppose that you want to swap order of 2 columns in the second row in mobile view. So please follow these steps:

Step 1: Open settings of the second row. 

Open row settings
Image 5: Open settings of the second row

Step 2: In General tab, find Reverse Column button. Just turn on the button and done! No more steps are needed. 

Turn on Reverse Column button
Image 6: Turn on Reverse Column button

If you check these columns in mobile mode, you can see that they are swapped.

Reversed column order on mobile
Image 7: Column order on mobile mode after reversed
Video tutorial
You may also like:
Spacing Columns by Gap Type and Column Gap in Magezon Page Builder
How to Create Equal Height Columns in Magezon Page Builder
Magezon Page Builder: How to Create Multiple Columns

To Sum Up

Find this feature useful? Please let us know by leaving a comment below. Also, don’t hesitate to let us know if you have any questions. 

Try FREE Magezon Page Builder demo today

Easily create beautiful, engaging Magento website in any style whenever you want without relying on developers or designers. Just by drag & drop.

About Trang Vu

Trang Vu
Min is a content marketer with more than 2-year experience in Magento. She has great patience and high concentration ability to deal with every pressure at work.

Check Also

Copy paste content

How to Copy Content Between Pages or Domains in Magezon Page Builder

When building a website, you will need a consistency in design. It’s the vital key …

Leave a Reply