Breakpoint targetable classes

Any breakpoint targetable class may have the shortname of the desired breakpoint added as a suffix. This class will apply at the supplied breakpoint and up. Valid suffixes are: sm (480px), md (768px), lg (992px), xl (1200px). No prefix is the default and should be treated as xs mobile.

Specific breakpoint classes are also available with -only appended (sm-only, md-only, lg-only, xl-only).

.{breakpoint-targetable-class}@{sm[-only],md[-only],lg[-only],xl[-only]}

The following will be 1 column on mobile and 4 columns at md and up.

.flex__container--1-up.flex__container--4-up@md

We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.