Column stacking on mobile in Bootsrap - Browser Rendering Trace

Render Flow - Column stacking on mobile

Load HTML with Bootstrap classes

↓

Parse Bootstrap CSS

↓

Apply grid classes to columns

↓

Detect viewport width

↓

If viewport < breakpoint: stack columns vertically

↓

If viewport >= breakpoint: arrange columns horizontally

↓

Paint layout

↓

Composite final render

The browser loads the HTML and Bootstrap CSS, then applies grid classes to columns. It checks the screen width and stacks columns vertically on small screens (mobile) and arranges them side-by-side on larger screens.

Render Steps - 3 Steps

Code Added:<div class="container"> <div class="row"> <div>Column 1</div> <div>Column 2</div> </div> </div>

Before

→

After

[container]
  [row]
    [Column 1]
    [Column 2]

Basic HTML structure with container, row, and two divs for columns. No Bootstrap grid classes yet, so columns stack by default.

🔧 Browser Action:Creates DOM tree and applies default block layout

Code Sample

Two columns side-by-side on medium and larger screens, stacked vertically on smaller screens like mobile.

Bootsrap

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

Render Quiz - 3 Questions

After applying col-md-6 classes (render_step 2), how do the columns appear on a desktop screen?

A Two columns stacked vertically, each full width

B One column taking full width, the other hidden

C Two columns side-by-side, each taking half the width

D Columns overlap each other

Common Confusions - 2 Topics

Why do my columns stack vertically on mobile even though I used col-md-6?

Because col-md-6 applies the half-width only on medium screens and larger. On smaller screens, columns default to full width and stack vertically. This is shown in render_steps 2 and 3.

💡 Bootstrap grid classes apply from their breakpoint and up; below that, columns stack.

Why doesn't adding col-md-6 make columns side-by-side on mobile?

The 'md' in col-md-6 means the style applies starting at medium screen sizes (≥768px). On mobile (smaller than 768px), the columns stack vertically by default.

💡 Use col- or col-sm- classes to control layout on smaller screens.

Property Reference

Property/Class	Breakpoint	Effect on Columns	Visual Behavior	Common Use
col	None (always)	Columns share equal width	Columns side-by-side always	Simple equal columns on all screens
col-md-6	≥768px (medium)	Columns take 50% width on md and up	Side-by-side on md+, stacked on smaller	Responsive two-column layout
col-sm-12	≥576px (small)	Columns take full width on sm and up	Stacked on small and below	Force stacking on small screens
row	N/A	Creates horizontal flex container	Aligns columns horizontally by default	Wrap columns in grid row

Concept Snapshot

Bootstrap columns stack vertically on small screens by default. Use col-md-6 to make columns side-by-side on medium (≥768px) and larger screens. Below the md breakpoint, columns take full width and stack. The 'row' class creates a flex container for horizontal layout. Resize viewport to see columns stack or align side-by-side responsively.