DNA provides some simple helper classes for showing/hiding elements depending on the viewport width.
Styling on max-width
| ↓ Class name / Max-width → |
576px |
768px |
992px |
1200px |
> 1200px |
.ys-u-until-sm |
Visible |
Not visible |
Not visible |
Not visible |
Not visible |
.ys-u-until-md |
Visible |
Visible |
Not visible |
Not visible |
Not visible |
.ys-u-until-lg |
Visible |
Visible |
Visible |
Not visible |
Not visible |
.ys-u-until-xl |
Visible |
Visible |
Visible |
Visible |
Not visible |
Styling on min-width
| ↓ Class name / Min-width → |
< 576px |
576px |
768px |
992px |
1200px |
.ys-u-from-sm |
Not visible |
Visible |
Visible |
Visible |
Visible |
.ys-u-from-md |
Not visible |
Not visible |
Visible |
Visible |
Visible |
.ys-u-from-lg |
Not visible |
Not visible |
Not visible |
Visible |
Visible |
.ys-u-from-xl |
Not visible |
Not visible |
Not visible |
Not visible |
Visible |
