Column stacking on mobile in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make two columns stack vertically on small screens.

Bootsrap

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

Drag options to blanks, or click blank then click option'

A4

B12

C6

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-6 will place columns side by side on small screens.

Not specifying column size causes unpredictable layout.

Using col-12 makes each column take full width on small screens, stacking them vertically.

2fill in blank

medium

Complete the code to make columns side by side on medium screens but stacked on small screens.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Amd

Bsm

Cxl

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sm' will make columns side by side on small screens, not stack.

For stacking on small screens, use col-12 without breakpoint.

Using col-12 stacks columns on small screens, and col-md-6 makes them side by side on medium screens and larger.

3fill in blank

hard

Fix the error in the class to stack columns on mobile but keep them side by side on large screens.

Bootsrap

<div class="row">
  <div class="col-lg-[1] col-12">Column 1</div>
  <div class="col-lg-[1] col-12">Column 2</div>
</div>

Drag options to blanks, or click blank then click option'

A12

B3

C6

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-lg-12 makes columns full width even on large screens.

Not including col-12 causes columns to stay side by side on small screens.

Using col-lg-6 makes columns side by side on large screens, and col-12 stacks them on smaller screens.

4fill in blank

hard

Fill both blanks to create three columns that stack on small screens and are side by side on medium screens.

Bootsrap

<div class="row">
  <div class="col-[1] col-[2]-4">Column 1</div>
  <div class="col-[1] col-[2]-4">Column 2</div>
  <div class="col-[1] col-[2]-4">Column 3</div>
</div>

Drag options to blanks, or click blank then click option'

A12

Bmd

Csm

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-sm-4 instead of col-md-4 makes columns side by side on small screens.

Using col-6 stacks only two columns per row, not three.

col-12 stacks columns on small screens, and col-md-4 makes three equal columns side by side on medium screens and larger.

5fill in blank

hard

Fill all three blanks to create a responsive layout with two columns: stacked on extra small, side by side on medium, and one column on large screens.

Bootsrap

<div class="row">
  <div class="col-[1] col-[2]-6 col-[3]-12">Column 1</div>
  <div class="col-[1] col-[2]-6 col-[3]-12">Column 2</div>
</div>

Drag options to blanks, or click blank then click option'

A12

Bmd

Clg

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-sm instead of col-md for medium screens.

Not including col-12 causes columns to stay side by side on small screens.

col-12 stacks columns on extra small screens, col-md-6 places them side by side on medium screens, and col-lg-12 stacks them again on large screens.

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