Below you will find the classes used by code.gov to hide and display tags based on screen width. Use these classes to avoid creating your own media queries:
.show-w-gt-400
.show-w-lte-400
.show-w-gt-500
.show-w-lte-500
.show-w-gt-600
.show-w-lte-600
.show-w-gt-700
.show-w-lte-700
.show-w-gt-800
.show-w-lte-800
.show-w-gt-900
.show-w-lte-900
.show-w-gt-1000
.show-w-lte-1000
.show-w-gt-1100
.show-w-lte-1100
.show-w-gt-1200
.show-w-lte-1200
.show-w-gt-1300
.show-w-lte-1300
You can show different text for mobile and desktop by using CSS classes
Only show this if the width is greater than 800px
Only show this if the width less than or equal to 800px
<blockquote class="show-w-gt-800">Only show this if the width is <b>greater than</b> 800px</blockquote>
<blockquote class="show-w-lte-800">Only show this if the width <b>less than or equal to</b> 800px</blockquote>