Data attribute CSS selector responsive trick

main.css

@media (min-width: 768px) and (max-width: 979px) {
    
	[data-hide="minWidth768"] {
		/* http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ */
		position: absolute; 
		overflow: hidden; 
		clip: rect(0 0 0 0); 
		height: 1px; 
		width: 1px; 
		margin: -1px; 
		padding: 0; 
		border: 0;
	}
    
}

main.html

<!--
When the viewport is > 768px and < 979px, the text in the span (the button labels) will be hidden
-->

<div class="btn-toolbar">
	<div class="btn-group">
		<a class="btn btn-small" href="#"><i class="icon-play"></i><span data-hide="minWidth768"> Preview</span></a>
		<a class="btn btn-small" href="#"><i class="icon-pencil"></i><span data-hide="minWidth768"> Edit</span></a>
	    <a class="btn btn-small" href="#"><i class="icon-remove"></i><span data-hide="minWidth768"> Delete</span></a>
    </div>
</div>