Reverse column stacking order

By default, columns that stand side by side on a large device will change to stacked columns on a small device, where left to right becomes top to bottom. For more complex examples of how layers of columns in a row stack by default, see the column layouts overview in Related Articles.

You can easily reverse the stacking order with a setting on the Advanced tab so the columns stack bottom to top. The reversed stacking order applies to all columns in the same layer, so you only have to change the setting for one of the columns.

In this example, there are two rows with two columns each. This screenshot shows the large screen view in the Beaver Builder editor, with text in the left column in the first row, and text in the right column in the second row.

With the default stacking order on a small device, the left-right columns change to above-below, as shown in the following screenshot, so the first row shows text-photo and the second row shows photo-text.

This order is somewhat confusing on small devices because it's harder to see from the vertical order which text applies to which photo.

If you change Stacking order to Reversed on the Advanced tab of either of the columns in the first row only, the ordering of items in the two rows changes to photo-text-photo-text on small devices, as shown in this screenshot. This makes the content flow cleaner.

To reverse the stacking order of columns on small devices:

  1. Mouse over one of the modules in your columns and click Column Settings.
  2. Navigate to the Advanced tab.
  3. In the Visibility section (or the Responsive Layout section prior to Beaver Builder 2.2), change Stacking Order to Reversed.

Test the stacking by typing the keyboard shortcut p or choosing Preview layout on the Tools menu, then clicking the phone icon in Preview mode.