You can use one of the following display classes:
blockflexinlineinline-blockinline-flex
For example, here's what the is-flex helper works:
---
title: Responsive helpers
layout: documentation
doc-tab: modifiers
doc-subtab: responsive-helpers
---
{% capture thead %}
{% endcapture %}
{% capture flex %}
Class
Mobile
Up to 768px
Tablet
Between 769px and 1007px
Desktop
Between 1008px and 1199px
Widescreen
Between 1200px and 1391px
FullHD
Above 1392px
flex
visible
hidden
unchanged
You can use one of the following display classes:
blockflexinlineinline-blockinline-flexFor example, here's what the is-flex helper works:
is-flex-mobile
|
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
||||
is-flex-tablet-only
|
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
||||
is-flex-desktop-only
|
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
||||
is-flex-widescreen-only
|
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
||||
|
Classes to display up to or from a specific breakpoint |
||||
|---|---|---|---|---|
is-flex-touch
|
{{ flex }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
||||
is-flex-tablet
|
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
{{ flex }}
||||
is-flex-desktop
|
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
||||
is-flex-widescreen
|
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
||||
is-flex-fullhd
|
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
||||
For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex
is-hidden-mobile
|
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
||||
is-hidden-tablet-only
|
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
||||
is-hidden-desktop-only
|
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
||||
is-hidden-widescreen-only
|
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
||||
|
Classes to hide up to or from a specific breakpoint |
||||
|---|---|---|---|---|
is-hidden-touch
|
{{ hidden }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
||||
is-hidden-tablet
|
{{ visible }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
||||
is-hidden-desktop
|
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
||||
is-hidden-widescreen
|
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
||||
is-hidden-fullhd
|
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
||||