Responsive utilities are a group of media query-based classes that control when an element should be hidden or shown depending on the viewport. One popular use case for this is controlling display specific navigations. For example, a page may have a navigation bar on large displays and have a hidden navigation on small displays which is only displayed when a user chooses to open the navigation.
Let's look at a quick example with our Print Size page. Add the hidden-xs-down class to the img elements:
<div class="container"> <h1>Our Print Sizes</h1> <div class="row"> <div class="col-xs-6 col-sm-3 push-sm-3"> <img src="images/small.jpg" class="img-fluid img-circle hidden-xs-down"> <h5>Small</h5> ... </div> <div class="col-xs-6 col-sm-3 push-sm-3"> ...