Hey NAPA
.global-pad
The group that contains this whole page has the .global-pad class. On screen sizes that are 1240px or smaller, the .global-pad will add left and right padding to an element so its contents don’t get crammed against the edge. It’s important to only use this on top level group blocks. If you double it up or use it inconsistently, you’ll end up with a bunch of annoying alignment issues.
.mobile-reverse
This is in style.css, and it reverses the order of the blocks in a row on mobile. It doesn’t do anything to their width, nor does it cause them to stack. This also works with “sm-reverse” (same as mobile) or “md-reverse” (for medium/tablet screens). If you need to modify breakpoints, you can change this in style.css.
Part Two
Part One
.mobile-reverse on columns
This also works on columns. Remember that columns already have a toggle that allows you to stack them on mobile (it just doesn’t reverse them).
Column heading
Column Text
.mobile-stack
This is in style.css, and it stacks row items vertically on mobile. It also makes their width 100% on mobile, and removes left and right margins. This also works with “sm-stack” (same as mobile) or “md-stack” (for medium/tablet screens).
Part One
Part Two
.mobile-stack and .mobile-reverse
This is in style.css, and it stacks row items vertically on mobile and also reverses their order. Doing this also makes their width 100% on mobile, and removes left and right margins. This also works with “sm-reverse” (same as mobile) or “md-reverse” (for medium/tablet screens), but be careful to use consistent nomenclature (e.g., either use the “sm-” prefix or the “mobile-” prefix for both properties).
Part Two Reverse
Part One Reverse