Adding Panels to a Responsive Container

You can utilize responsive panel in panel behavior by adding items to a panel group. When you run the page, top-level containers in the page, including the panel group, fold responsively based on the size of the browser, and the panels within the panel group fold based on its current size, independent of the rest of the page. Additionally, items in the panel group are kept together when folding occurs. A panel group can be a good way to group together closely related content that you want to be visually separated from the other items on the page. This is particularly true when related items are arranged vertically. Typically, the order on which objects on the page wrap is based on rows. A panel group allows you to ensure that items arranged in a column are kept together when responsive folding occurs.

To create a panel group, click the Containers tab, select the Panel group container, and drag it onto the page. You can then resize it like any other container. If you add a panel group to the page by dragging it onto an existing empty panel container, the empty panel container is replaced with the panel group. Otherwise, if the panel contains content or is a multi-content container, the panel group is placed into an empty area of the page.

To add a panel to a panel group, drag a content item or another container into it. You can then resize the new container inside the panel group.

Properties applied to the panel group, such as margins or styling, affect all panels within it. You cannot add a title or toolbar to a panel group. 

You cannot set devices from which to hide individual panels in a panel group. You can set device availability for the entire panel group, which affects all panels within it, using the Show On property.