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.