Mobile devices - Change display order for child elements inside a column

Changing display order of child elements in MaxiBlocks editing experience

When creating a responsive design, it is common to need different layouts for desktop and mobile views. Here we will explain how to change the display order of child elements in a column when switching from desktop to mobile view in the MaxiBlocks editing experience interface.

Scenario

You have a webpage layout that includes images and text. On a desktop, the layout shows an image and text side by side, alternating the position for each row. For mobile devices, you want to change the order so that the image is always above the text.

Desktop View

Refer to the screenshot named to see how the elements are arranged on a larger screen (XXL, XL, L).

Incorrect Mobile View

The screenshot illustrates the default stacking order on mobile devices, which is not the desired outcome.

Corrected Mobile View

The screenshot displays the correct order for mobile view, with images on top of texts consistently.

Instructions & Video (coming soon)

1. Use the "list view" or "breadcrumbs" to select the "Column" settings.
   • Select the column you want to adjust for mobile view.
2. Navigate to the Flexbox settings.
   • Within the row settings, locate the Flexbox or similar layout settings
3. Adjust flex child properties.
   • Identify the child elements that need reordering (in this case, the text blocks).
4. Set the order for mobile.
   • You will find an 'Order' setting in the Flex Child properties.
   • Adjust the order number to rearrange the elements. By default, the lower numbers come first. So, you may set your image to order: 1 and the text to order: 2 .
5. Apply the settings to mobile breakpoints.
   • Make sure to apply these settings to the appropriate breakpoints (M, S, and XS).
   • These changes typically cascade down from larger breakpoints (M) to smaller ones (S and XS).
6. Preview the changes.
   • Use the responsive mode in your webpage builder to preview the layout on different devices.
7. Save and test on actual devices.
   • After confirming the layout looks correct in the builder's preview mode, save your changes.
   • It's also a good practice to view the live page on actual mobile devices to ensure the changes appear as intended. Always use an incognito browser tab to test so you don't see the cached version of the page.

Tips

• Always check the order of appearance in both landscape and portrait modes on mobile devices.
• Remember that layout changes applied at smaller breakpoints do not affect larger breakpoints.
• Review any additional settings that may impact the layout, such as margins or padding, which may differ between desktop and mobile views.

Now you can control the display order of elements on your webpage to create a user-friendly and responsive design that adapts to the screen size of desktops and mobile devices.