This text is shown only on a small screen.This text is shown on medium screens and up.This text is shown only on a medium screen.This text is shown on large screens and up.This text is shown only on a large screen.This text is shown on xlarge screens and up.This text is shown only on an xlarge screen.This text is shown on xxlarge screens and up.

You are not on a small screen.You are not on a medium, large, xlarge, or xxlarge screen.You are not on a medium screen.You are not on a large, xlarge, or xxlarge screen.You are not on a large screen.You are not on an xlarge screen and up.You are not on an xlarge screen.You are not on an xxlarge screen.

You are in landscape orientation.You are in portrait orientation.

You are on a touch-enabled device.You are not on a touch-enabled device.

HTML

<p class="panel">
<strong class="show-for-small-only">This text is shown only on a small screen.</strong>
<strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="show-for-large-up">This text is shown on large screens and up.</strong>
<strong class="show-for-large-only">This text is shown only on a large screen.</strong>
<strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
<strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
</p>
<p class="panel">
<strong class="hide-for-small-only">You are <em>not</em> on a small screen.</strong>
<strong class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
<strong class="hide-for-medium-only">You are <em>not</em> on a medium screen.</strong>
<strong class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
<strong class="hide-for-large-only">You are <em>not</em> on a large screen.</strong>
<strong class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
<strong class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
<strong class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
</p>
<p class="panel">
<strong class="show-for-landscape">You are in landscape orientation.</strong>
<strong class="show-for-portrait">You are in portrait orientation.</strong>
</p>
<p class="panel">
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>