Responsive composition
Compose mobile-first layouts that preserve meaningful source order across breakpoints.
Responsive layout composition
Start every region at 12 columns, then opt into wider arrangements at md and lg. The markup stays in a useful reading order at every width.
A wide story at large screens
This region spans the full row on mobile and eight columns from the large breakpoint.
Supporting detail
Two equal cards from the medium breakpoint.
Another detail
Source order remains the mobile reading order.
<section class="bs-container bs-section" aria-labelledby="features-title">
<h2 id="features-title">Features</h2>
<div class="bs-grid bs-gap-4">
<article class="bs-card bs-col-12 bs-col-lg-8">…</article>
<aside class="bs-card bs-col-12 bs-col-md-6 bs-col-lg-4">…</aside>
</div>
</section>Structure
Use a labeled <section> for the region, then place articles, asides, or plain containers directly inside the grid.
Class map
.bs-grid creates 12 tracks. .bs-col-12 is the mobile baseline; md applies from 48rem and lg from 64rem.
Accessibility
Keep the DOM in a logical small-screen reading order. Breakpoint classes should change presentation without changing meaning or focus order.
Responsive breakpoints
Column spans are mobile-first. Start with an unprefixed span, then override it only where the composition needs more room.
| Prefix | Starts at | Example |
|---|---|---|
| None | All viewport widths | .bs-col-12 |
md | 48rem / 768px | .bs-col-md-6 |
lg | 64rem / 1024px | .bs-col-lg-4 |