Responsive Behavior of Widgets/Layouts

Overview

The Open Berkeley design is "responsive," meaning the contents of your pages will reflow based on the width of the device where they're being viewed (for example, desktop, mobile, or tablet devices). There are many available layouts when individual pages are customized, and depending on which layout is chosen and how many widgets are used on a page, the widgets will "stack" on smaller displays/mobile devices.

How Widgets Stack on Smaller Displays

  • The mobile stacking logic is based on the order of the available rows, and after that, the columns within each row.
  • At the narrowest mobile width, everything will collapse to a single column.
  • The page will display with the first row first. Each column within the first row will display in order from left to right.
  • The preview thumbnails for each layout should help you figure out how the layout will be displayed.

There are variations on the above when there are columns that span more than one row. For example, in layouts where there is a full-height sidebar that spans multiple rows of content, everything in the sidebar will display as a unit. If the sidebar is on the left, the entire content of the sidebar will display before other items in its row and subsequent rows that it spans. If the sidebar is on the right, everything in it will display after other content in its row, but before the content of other rows that it spans.