Responsive Utilities

Code

<!-- Hidden on small, visible on medium+ -->
<div class="d-none d-md-block">Medium and up</div>

<!-- Visible only on small screens -->
<div class="d-md-none">Small only</div>

<!-- Print-only content -->
<div class="d-print-none">Screen only</div>
<div class="d-none d-print-block">Print only</div>

<!-- Flex direction per breakpoint -->
<div class="d-flex flex-column flex-md-row">
  <div class="flex-fill">Grows</div>
  <div>Fixed</div>
</div>

<!-- Responsive ordering -->
<div class="order-3 order-md-1">First on md+</div>
<div class="order-1 order-md-2">Second on md+</div>

Explanation

Display utilities like d-none and d-md-block show or hide elements per breakpoint. The pattern d-none d-md-block means hidden by default and visible from medium up. Flex and order utilities accept the same breakpoint suffixes for responsive layouts.

More Bootstrap Snippets