Column stacking on mobile in Bootsrap - Performance & Optimization

Performance: Column stacking on mobile

MEDIUM IMPACT

This affects the page's layout rendering speed and visual stability on mobile devices.

Making columns stack vertically on small screens for better readability

Bootsrap

<div class="row">
  <div class="col-12 col-md-6">Column 1</div>
  <div class="col-12 col-md-6">Column 2</div>
</div>

Using responsive classes lets columns stack vertically on small screens and side-by-side on medium and larger screens, improving layout stability and readability.

📈 Performance GainPrevents layout shifts and horizontal scrolling, improving CLS and user experience

Making columns stack vertically on small screens for better readability

Bootsrap

<div class="row">
  <div class="col-6">Column 1</div>
  <div class="col-6">Column 2</div>
</div>

Using fixed column widths without responsive classes causes columns to stay side-by-side on small screens, making content cramped and causing horizontal scrolling.

📉 Performance CostTriggers layout shifts on resize and poor CLS due to forced horizontal scroll

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fixed columns without responsive classes	Minimal DOM nodes	Multiple reflows on resize due to forced horizontal scroll	Higher paint cost from layout shifts	[X] Bad
Responsive columns with col-12 col-md-6 classes	Minimal DOM nodes	Single reflow on resize with smooth stacking	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

Responsive column stacking uses CSS media queries to adjust layout at different screen widths. The browser recalculates styles and layout when the viewport changes, affecting style calculation and layout stages.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage is most expensive due to recalculating element positions when columns stack or unstack.

Core Web Vital Affected

CLS

This affects the page's layout rendering speed and visual stability on mobile devices.

Optimization Tips

1Use Bootstrap's responsive grid classes like col-12 col-md-6 to stack columns on small screens.

2Avoid fixed-width columns that cause horizontal scrolling on mobile.

3Test layout changes with browser DevTools by resizing viewport to check for layout shifts.

Performance Quiz - 3 Questions

What is the main performance benefit of using Bootstrap's responsive column classes for stacking on mobile?

A They eliminate the need for CSS entirely.

B They reduce the number of DOM elements on the page.

C They prevent layout shifts by adjusting layout smoothly with media queries.

D They increase the bundle size but improve desktop speed.

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record while resizing viewport from desktop to mobile width, then stop recording.

What to look for: Look for layout shifts and reflows during resize; fewer and shorter layout recalculations indicate better performance.