Responsive

For adjustments that only affect the mobile screen sizes and not any bigger screens we use class names that all start with a breakpoint indicator that shows what maximum screen size will be affected by it.

Tablet

Screen width 991 pixels and smaller
All predefined class names that affect this breakpoint and smaller start with:

bp‑s__

It can, for example, be used to center a text only on mobile screens, or to go from a 6 column layout to a 3 column layout (12 / 4 = 3).
bp-S__text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
layout__row
layout__col
layout__col-2
bp-S__layout__col-4
layout__col
layout__col-2
bp-S__layout__col-4
layout__col
layout__col-2
bp-S__layout__col-4
layout__col
layout__col-2
bp-S__layout__col-4
layout__col
layout__col-2
bp-S__layout__col-4
layout__col
layout__col-2
bp-S__layout__col-4

Mobile landscape

Screen width 767 pixels and smaller
All predefined class names that affect this breakpoint and smaller start with:

bp‑xs__

It can for example be used to go back to left align a text for these screen sizes, or to go from a 6 column layout on desktop, to a 3 column layout on tablet, to a 2 column layout on mobile landscape.
text-XXL
bp-S__text-center
bp-XS__text-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
layout__row
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6

Mobile portrait

Screen width between 478 and 360 pixels
All predefined class names that affect only this breakpoint start with:

bp‑xxs__

It can for example, be used to center align a text only on this smallest screens or to go from a 6 column layout on desktop, to a 3 column layout on tablet, to a 2 column layout on mobile landscape, to finally a 1 column layout on mobile portrait format.
text-XXL
bp-XXS__text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
layout__row
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
bp-XXS__layout__col-12
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
bp-XXS__layout__col-12
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
bp-XXS__layout__col-12
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
bp-XXS__layout__col-12
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
bp-XXS__layout__col-12
layout__col
layout__col-2
bp-S__layout__col-4
bp-XS__layout__col-6
bp-XXS__layout__col-12