Hiding elements on different screen sizes

    <p class="ric-layout__small--hide">
    	hide on small screen
    	< 960px (display:none) </p>
    
    		<p class="ric-layout__small--show" style="display:none">
    			show on small screen
    			< 960px (display:block) </p>
    
    				<p class="ric-layout__phone--hide">
    					hide on phone screen
    					< 600px (display:none) </p>
    
    						<p class="ric-layout__phone--show" style="display:none">
    							show on phone screen
    							< 600px (display:block) </p>
    
    								<p class="ric-layout__medium--hide">
    									hide on medium screen > 960px (display:none)
    								</p>
    
    								<p class="ric-layout__medium--show" style="display:none">
    									show on medium screen > 960px (display:block)
    								</p>
    
    								<span class="ric-layout__medium--show--inline" style="display:none">
      show on medium screen > 960px for an inline element (display:inline)
    </span>