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 Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .