User modifies columns layout per viewport with layout presets

[github-jira-sync-bot]

As a Marketer I want to have layout presets to apply to columns to quickly modify columns layout per viewport so that I can adjust content positioning to be optimized for displaying in mobile devices

Preconditions

• User logged in Admin Panel
• User is on the page supporting Page Builder
• There are columns on the page
• User is viewing content optimized for desktop

Acceptance Criteria

• User opens columns configuration and sees layout presets available for desktop viewport
• User changes layout preset selected and saves configuration. Selected layout applied to columns
• User switches content layout to mobile viewport.
• User sees columns layout to get adjusted to a mobile viewport based on the default layout preset selected
• User opens Columns configuration options and sees columns layout presets for mobile viewport
• User sees the stacked columns preset selected by default
• User changes the preset to another one, saves configuration and sees columns positioned according to the layout preset selected.
• User switches content layout to desktop and sees columns positioned according to the layout preset selected for desktop
• User saves the page and views it on storefront: columns layout on desktop corresponds the layout preset selection for desktop viewport
• User opens page on mobile device: columns layout on mobile corresponds the layout preset selection for mobile viewport

[github-jira-sync-bot]

The issue was exported from the internal Jira. The link to the original Jira issue: https://jira.corp.magento.com/browse/PB-529

[m2-assistant[bot]]

Hi @github-jira-sync-bot. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[in-session]

One more note, there is currently also the problem that per line a pagebuilder-column-group is inserted, this makes it impossible to build a mobile design. For example desktop 3 columns x 2 lines, mobile 2 columns x 3 lines. Here it would be more optimal to have an additional content element, for example columns container similar to bootstrap and then the columns can be inserted next to each other or under each other.

---

Currently I have customized the page builder with additional fields to solve the problem temporarily.