# Display

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

The display classes apply to the device width and larger, class="d-none" will hide the element on all display widths while class="d-s-none d-m-block" will only hide the element on small devices.

visible t / hidden t
hidden t
visible t
Hidden s Only
Result Not s
Visble s Only
Result s Only
Visble m+
Result m+

    <div class="row">
    	<div class="span-s6">visible t / hidden t</div>
    	<div class="span-s6 result d-none d-s-block">hidden t</div>
    	<div class="span-s6 result d-block d-s-none">visible t</div>
    </div>
    <div class="row">
    	<div class="span-s6">Hidden s Only</div>
    	<div class="span-s6 result d-s-none d-m-block">Result s Only</div>
    </div>
    <div class="row">
    	<div class="span-s6">Visble s Only</div>
    	<div class="span-s6 result d-none d-s-block d-m-none">Result s Only</div>
    </div>
    <div class="row">
    	<div class="span-s6">Visble m+</div>
    	<div class="span-s6 result d-none d-m-block">Result m+</div>
    </div>