Column stacking on mobile in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Bootstrap handle column stacking on small screens?

In Bootstrap, when you use the grid system with classes like col-md-4, what happens to the columns on screens smaller than the md breakpoint?

A Columns stay side by side with fixed widths regardless of screen size.

B Columns stack vertically, each taking full width on smaller screens.

C Columns disappear on smaller screens.

D Columns become hidden and replaced by a dropdown menu.

💡 Hint

Think about how Bootstrap's grid classes apply from the specified breakpoint and up.

Bootstrap grid classes like col-md-4 apply starting at the medium breakpoint (≥768px). Below that, columns stack vertically and take full width by default.

📝 Syntax

intermediate

Identify the correct Bootstrap class for stacking columns on mobile

Which Bootstrap class ensures that columns stack vertically on mobile devices but display side by side on medium and larger screens?

A col-lg-12 col-sm-6

B col-md-12 col-6

C col-6 col-md-12

D col-12 col-md-6

💡 Hint

Remember that col-12 applies to all screen sizes by default.

col-12 makes the column full width on extra small screens (mobile), and col-md-6 makes it half width on medium and larger screens.

❓ rendering

advanced

What is the visual output of this Bootstrap grid code on a small screen?

Given the following HTML using Bootstrap 5:

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

What will the columns look like on a screen smaller than 768px wide?

A Three columns stacked vertically, each full width.

B Three columns side by side, each one-third width.

C Only the first column visible, others hidden.

D Columns overlap each other horizontally.

💡 Hint

Bootstrap columns with col-md-* stack vertically below the medium breakpoint.

The col-md-4 class applies from 768px and up. Below that, columns stack vertically and take full width by default.

❓ selector

advanced

Which CSS selector targets stacked columns on mobile in Bootstrap?

You want to style Bootstrap columns only when they stack vertically on mobile devices (less than 768px). Which CSS selector combined with media queries correctly targets these stacked columns?

A @media (max-width: 767.98px) { .row > [class*='col-'] { margin-bottom: 1rem; } }

B @media (min-width: 768px) { .row > .col-md-4 { margin-bottom: 1rem; } }

C .row > .col-md-4 { margin-bottom: 1rem; }

D @media (max-width: 991.98px) { .row > .col-lg-4 { margin-bottom: 1rem; } }

💡 Hint

Stacking happens below the medium breakpoint (768px).

The selector targets any column class inside a row on screens smaller than 768px, where columns stack vertically. The other options target larger screens or specific classes without media queries.

❓ accessibility

expert

Ensuring accessible column stacking on mobile with Bootstrap

When Bootstrap columns stack vertically on mobile, what is the best practice to maintain logical reading order and accessibility for screen readers?

A Add <code>aria-hidden="true"</code> to all stacked columns.

B Use CSS <code>order</code> property to rearrange columns visually without changing HTML order.

C Keep the HTML source order matching the visual order and avoid using CSS order properties.

D Hide some columns on mobile to reduce clutter for screen readers.

💡 Hint

Screen readers read content in the order it appears in the HTML.

Maintaining the HTML source order consistent with visual order ensures screen readers read content logically. Using CSS order can confuse screen readers. Hiding content or using aria-hidden incorrectly reduces accessibility.

Practice

1. What does the Bootstrap class col-12 do on mobile screens?

easy

A. Makes the column take full width and stack vertically

B. Makes the column take half width and stay side-by-side

C. Hides the column on mobile screens

D. Centers the column horizontally

Solution

1. Step 1: Understand col-12 meaning

   The class col-12 means the column will take all 12 parts of the grid, which is full width.

2. Step 2: Effect on mobile screens

   On small screens, columns with col-12 stack vertically because each takes full width.

3. Final Answer:

   Makes the column take full width and stack vertically -> Option A

4. Quick Check:

   col-12 = full width stack [OK]

Hint: Full width columns stack vertically on mobile with col-12 [OK]

Common Mistakes:

• Thinking col-12 means half width
• Assuming columns stay side-by-side on mobile
• Confusing col-12 with hiding columns

2. Which Bootstrap class combination makes two columns stack on mobile but sit side-by-side on medium screens?

easy

A. col-6 col-md-12

B. col-md-6 col-lg-12

C. col-6 col-lg-6

D. col-12 col-md-6

Solution

1. Step 1: Analyze mobile stacking

   col-12 makes columns full width on mobile, so they stack vertically.

2. Step 2: Analyze medium screen layout

   col-md-6 makes columns half width on medium screens, so they sit side-by-side.

3. Final Answer:

   col-12 col-md-6 -> Option D

4. Quick Check:

   Mobile stack = col-12, Medium side-by-side = col-md-6 [OK]

Hint: Use col-12 for mobile stack, col-md-6 for medium side-by-side [OK]

Common Mistakes:

• Reversing col-12 and col-md-6 classes
• Using col-6 on mobile which prevents stacking
• Ignoring breakpoint order in class names

3. Given this HTML snippet:

<div class='row'>
  <div class='col-12 col-md-4'>A</div>
  <div class='col-12 col-md-8'>B</div>
</div>

How will columns appear on a small mobile screen?

medium

A. Columns A and B stacked vertically, each full width

B. Columns A and B stacked vertically, widths 4/12 and 8/12

C. Only column A visible, column B hidden

D. Columns A and B side-by-side with widths 4/12 and 8/12

Solution

1. Step 1: Check mobile classes

   Both columns have col-12 which means full width on small screens, so they stack vertically.

2. Step 2: Check medium screen classes

   col-md-4 and col-md-8 apply only on medium and larger screens, so no effect on mobile.

3. Final Answer:

   Columns A and B stacked vertically, each full width -> Option A

4. Quick Check:

   Mobile uses col-12, so stacked full width [OK]

Hint: On mobile, col-12 stacks columns vertically regardless of col-md-* [OK]

Common Mistakes:

• Thinking col-md-* affects mobile layout
• Assuming side-by-side on mobile
• Confusing widths on small screens

4. You want two columns to stack on mobile but sit side-by-side on medium screens. You wrote:

<div class='row'>
  <div class='col-md-6'>Left</div>
  <div class='col-md-6'>Right</div>
</div>

Why do the columns NOT stack on mobile?

medium

A. Because col-md-6 applies to mobile screens too, so on mobile columns default to equal width side-by-side

B. Because you forgot to add col-12 to make columns full width on mobile

C. Because row class disables stacking on mobile

D. Because columns need col-sm-12 to stack on mobile

Solution

1. Step 1: Understand default column behavior

   Without col-* classes for small screens, columns try to share space equally side-by-side.

2. Step 2: Add col-12 for mobile stacking

   Adding col-12 makes columns full width on mobile, forcing vertical stacking.

3. Final Answer:

   You forgot to add col-12 to make columns full width on mobile -> Option B

4. Quick Check:

   Mobile stack needs col-12 class [OK]

Hint: Add col-12 for mobile stacking, col-md-6 for medium side-by-side [OK]

Common Mistakes:

• Assuming col-md-6 controls mobile layout
• Thinking row class prevents stacking
• Using col-sm-12 instead of col-12 for mobile

5. You want a layout with three columns that stack on mobile, show two columns side-by-side on tablets, and three columns side-by-side on desktops. Which class setup achieves this?

hard

A. col-12 col-sm-4 col-lg-4

B. col-6 col-md-4 col-lg-3

C. col-12 col-md-6 col-lg-4

D. col-12 col-md-4 col-lg-3

Solution

1. Step 1: Mobile stacking with full width

   col-12 makes columns full width on mobile, so they stack vertically.

2. Step 2: Two columns side-by-side on tablets

   col-md-6 means on medium screens (tablets), columns take half width, so two fit side-by-side.

3. Step 3: Three columns side-by-side on desktops

   col-lg-4 means on large screens (desktops), columns take 4/12 width, so three fit side-by-side.

4. Final Answer:

   col-12 col-md-6 col-lg-4 -> Option C

5. Quick Check:

   Mobile stack = col-12, Tablet 2 cols = col-md-6, Desktop 3 cols = col-lg-4 [OK]

Hint: Use col-12 mobile, col-md-6 tablet, col-lg-4 desktop for stacking [OK]

Common Mistakes:

• Using col-sm instead of col-md for tablets
• Choosing wrong column widths that don't add up
• Forgetting col-12 for mobile stacking