At smaller sizes the call-out above gets an inline background to give is enough constrast to read. This was done in the text editor. On the left we added a small page navigation for quickly jumping to specific areas on the page. The naviagtion is stacked upon this column by increasing the span width to 12 at the second breakpoint. This can be done on the layout pane.
These columns do not take up all the width of the row. They are limited to 7 spans for desktop viewers and pushed 3 spans to the right. All this is easily configurable on the layout tab. For smaller screens this is adjusted. At the second breakpoint the push is removed and the span width increased to 12 (the full width since we’re using a grid configuration with 12 columns).
“
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Jane Doe, The LadyBug Project