Column ordering in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap column ordering classes

In Bootstrap, which class would you use to move a column to the first position on all screen sizes?

A order-first

B order-0

C order-start

D order-top

💡 Hint

Think about the class that explicitly places a column at the start regardless of screen size.

The order-first class moves the column to the first position on all screen sizes. The order-0 class sets order to zero but does not guarantee first position if other columns have negative or smaller order values. The other classes do not exist in Bootstrap.

📝 Syntax

intermediate

Correct Bootstrap syntax for ordering columns on medium screens

Which option correctly applies a Bootstrap class to make a column appear last only on medium (md) screens and larger?

Bootsrap

<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>

A order-last-md

B order-last-md-4

C order-md-last

D order-md-12

💡 Hint

Bootstrap uses the pattern order-{breakpoint}-{value} for responsive ordering.

The correct syntax to make a column last on medium screens and up is order-md-last. The other options are invalid Bootstrap class names.

❓ rendering

advanced

Visual result of column ordering classes

Given this Bootstrap code, what is the visual order of columns on large screens (lg)? <div class="row"> <div class="col-lg-4 order-lg-3">A</div> <div class="col-lg-4 order-lg-1">B</div> <div class="col-lg-4 order-lg-2">C</div> </div>

Bootsrap

<div class="row">
  <div class="col-lg-4 order-lg-3">A</div>
  <div class="col-lg-4 order-lg-1">B</div>
  <div class="col-lg-4 order-lg-2">C</div>
</div>

A C, A, B

B B, C, A

C A, B, C

D B, A, C

💡 Hint

Lower order numbers appear first in the row.

The order-lg-1 column (B) appears first, then order-lg-2 (C), then order-lg-3 (A). So the visual order on large screens is B, C, A.

❓ selector

advanced

Selecting the correct CSS selector for Bootstrap column order

Which CSS selector targets all columns that have the Bootstrap class to appear first on small screens (sm)?

A .order-sm-first

B .col-sm-order-first

C .order-first-sm

D .order-sm-1

💡 Hint

Bootstrap uses the pattern order-{breakpoint}-{position}.

The correct selector is .order-sm-first. The other options are invalid class names or do not exist in Bootstrap.

❓ accessibility

expert

Accessibility considerations for reordered columns

When using Bootstrap column ordering classes to visually reorder content, what is the best practice to ensure screen readers read the content in the correct logical order?

A Use <code>aria-flowto</code> attributes to define reading order explicitly.

B Use JavaScript to reorder DOM elements dynamically after page load.

C Add <code>tabindex</code> to columns to control focus order.

D Avoid changing the HTML source order; reorder only visually with CSS.

💡 Hint

Think about how screen readers read the HTML source order.

Screen readers read content in the order it appears in the HTML source. Changing visual order with CSS alone can confuse users if the source order is not logical. The best practice is to keep the HTML source order logical and use CSS only for visual reordering.

Practice

1. What does Bootstrap's .order-* class do in a grid layout?

easy

A. It adds padding inside columns.

B. It changes the visual order of columns without altering the HTML structure.

C. It hides columns on smaller screens.

D. It changes the background color of columns.

Solution

1. Step 1: Understand the purpose of .order-* classes

   Bootstrap's .order-* classes let you rearrange columns visually without changing their HTML order.

2. Step 2: Compare with other options

   The other options describe unrelated styling or behavior, not column ordering.

3. Final Answer:

   It changes the visual order of columns without altering the HTML structure. -> Option B

4. Quick Check:

   Column ordering = Visual reorder without HTML change [OK]

Hint: Remember: .order-* changes visual order, not HTML order [OK]

Common Mistakes:

• Thinking .order-* changes HTML structure
• Confusing order with visibility or color
• Assuming it affects padding or margins

2. Which of the following is the correct syntax to make a column appear first using Bootstrap classes?

easy

A. class="col order-last"

B. class="col order-1"

C. class="col order-0"

D. class="col order-first"

Solution

1. Step 1: Recall Bootstrap order classes

   Bootstrap provides order-first to place a column first, order-last to place last, and numeric order-* from 0 to 12 for custom order.

2. Step 2: Analyze each option

   class="col order-1" uses order-1 which is not guaranteed first. class="col order-first" uses order-first which explicitly places the column first. class="col order-0" uses order-0 which is valid but less clear than order-first. class="col order-last" places the column last.

3. Final Answer:

   class="col order-first" -> Option D

4. Quick Check:

   Use order-first to place column first [OK]

Hint: Use order-first to make a column appear first easily [OK]

Common Mistakes:

• Using order-0 instead of order-first
• Confusing order-last with order-first
• Using invalid order numbers like order-13

3. Given this HTML snippet:

<div class="row">
  <div class="col order-3">A</div>
  <div class="col order-1">B</div>
  <div class="col order-2">C</div>
</div>

What is the visual order of columns on the page?

medium

A. B, C, A

B. A, B, C

C. C, B, A

D. B, A, C

Solution

1. Step 1: Understand order numbers

   Lower order numbers appear first visually. Here, B has order-1, C order-2, A order-3.

2. Step 2: Arrange columns by order

   Order from smallest to largest: B (1), C (2), A (3).

3. Final Answer:

   B, C, A -> Option A

4. Quick Check:

   Order numbers ascending = B, C, A [OK]

Hint: Lower order-* number means earlier visual position [OK]

Common Mistakes:

• Assuming HTML order is visual order
• Mixing up order numbers and column content
• Ignoring that order-1 is before order-2

4. You want the second column to appear first on small screens but keep original order on larger screens. Which class should you add?

medium

A. order-lg-first

B. order-first

C. order-sm-first

D. order-last

Solution

1. Step 1: Understand responsive order classes

   Bootstrap uses breakpoint prefixes like sm, md, lg to apply order changes at specific screen sizes.

2. Step 2: Match requirement to class

   To reorder only on small screens, use order-sm-first. order-first applies to all sizes. order-lg-first applies on large screens. order-last places last always.

3. Final Answer:

   order-sm-first -> Option C

4. Quick Check:

   Use order-sm-first for small screen reorder [OK]

Hint: Use order-sm-first to reorder only on small screens [OK]

Common Mistakes:

• Using order-first which affects all sizes
• Using order-lg-first which affects large screens
• Confusing order-last with order-first

5. You have three columns with classes:

<div class="col order-2 order-md-1">First</div>
<div class="col order-1 order-md-2">Second</div>
<div class="col order-3">Third</div>

How will the columns appear on small and medium screens respectively?

hard

A. Small: Second, First, Third; Medium: First, Second, Third

B. Small: First, Second, Third; Medium: Second, First, Third

C. Small: First, Second, Third; Medium: First, Second, Third

D. Small: Second, Third, First; Medium: First, Second, Third

Solution

1. Step 1: Analyze small screen order

   On small screens, order-* without breakpoint applies. So orders are: First=2, Second=1, Third=3. Visual order: Second (1), First (2), Third (3).

2. Step 2: Analyze medium screen order

   On medium screens, order-md-* overrides. First=1, Second=2, Third=3. Visual order: First, Second, Third.

3. Final Answer:

   Small: Second, First, Third; Medium: First, Second, Third -> Option A

4. Quick Check:

   Breakpoint order overrides default order [OK]

Hint: Breakpoint-specific order overrides default order [OK]

Common Mistakes:

• Ignoring breakpoint-specific order classes
• Assuming order-md-* applies on small screens
• Mixing up order numbers and visual positions