Visibility

The visibility-* and hidden-* classes allow elements to be hidden and exposed based on the device width.

Hiding Elements

The visible and hidden classes specify the device widths at which elements are hidden from view or exposed to the site user.

visible-t / hidden-t
hidden-t
visible-t
visible-s / hidden-s
hidden-s
visible-s
visible-m / hidden-m
hidden-m
visible-m
visible-l / hidden-l
hidden-l
visible-l
<div class="row">
	<div class="span-s6">visible-t / hidden-t</div>
	<div class="span-s6 result hidden-t">hidden-t</div>
	<div class="span-s6 result visible-t">visible-t</div>
</div>
<div class="row">
	<div class="span-s6">visible-s / hidden-s</div>
	<div class="span-s6 result hidden-s">hidden-s</div>
	<div class="span-s6 result visible-s">visible-s</div>
</div>
<div class="row">
	<div class="span-s6">visible-m / hidden-m</div>
	<div class="span-s6 result hidden-m">hidden-m</div>
	<div class="span-s6 result visible-m">visible-m</div>
</div>
<div class="row">
	<div class="span-s6">visible-l / hidden-l</div>
	<div class="span-s6 result hidden-l">hidden-l</div>
	<div class="span-s6 result visible-l">visible-l</div>
</div>
Top