Grid Demo (xs/sm/md/lg/xl/xxl)

Breakpoints: sm ≥ 576, md ≥ 768, lg ≥ 992, xl ≥ 1200, xxl ≥ 1400.

1) Responsive Spalten

Mobile: gestapelt. Ab md: 2 Spalten. Ab lg: 3 Spalten.

A
col-12 col-md-6 col-lg-4
B
col-12 col-md-6 col-lg-4
C
col-12 col-md-12 col-lg-4

2) Offsets

Ab lg: mittig durch offset-lg-3 + col-lg-6.

Centered
col-12 col-lg-6 offset-lg-3

3) Order

Mobile: Bild zuerst. Ab md: Text zuerst.

Text
order-2 order-md-1
Media
order-1 order-md-2

4) Gap-Mode (echtes gap + 12-Spalten Raster)

Nutze .row.gap für modernes Spacing ohne negative Margins.

Gap A
Gap B
1
2
3
4

5) Auto-Columns

Nur .col ⇒ Spalten teilen sich gleichmäßig.

Auto
Auto
Auto