Responsive helper variants
POM's breakpoint infixes are mobile-first:
| Infix | Applies from |
|---|---|
| none | 0px |
sm |
576px |
md |
768px |
lg |
992px |
xl |
1200px |
Examples:
<div class="col-12 col-md-6 col-lg-4">…</div>
<div class="d-flex flex-wrap flex-lg-nowrap">…</div>
<div class="d-none d-lg-flex align-items-center">…</div>The class without an infix establishes the smallest-width behavior; a later breakpoint overrides it from that minimum upward.
Grid columns stop at the lg tier. The xl breakpoint remains available only to utility families that explicitly document an extra-large variant.
Image sizing uses the non-responsive web-img-fit and web-img-stretch helpers. Apply component-specific media queries when an image needs different sizing at a breakpoint.
Review breakpoint changes
Test immediately below and at 576, 768, 992, and 1200 pixels when a component changes at those boundaries. Also test content-driven failures: a translated label, larger browser font, long title, and keyboard focus can expose problems that a clean desktop screenshot misses.
Keep the same semantic element and source order whenever only presentation changes. Duplicating content into separate mobile and desktop elements can create repeated screen-reader output and inconsistent state.
Do not create desktop-only markup and attempt to repair it with many utilities. Start with the small-screen reading order, then add the minimum larger-screen adjustments.