Column ordering in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is column ordering in Bootstrap?

Column ordering lets you change the order of columns on different screen sizes without changing the HTML structure.

beginner

How do you change the order of a column in Bootstrap?

Use the order classes like order-1, order-2, etc., to set the visual order of columns.

intermediate

What does order-md-3 do in Bootstrap?

It sets the column's order to 3 on medium screens and larger, changing its position visually on those screen sizes.

intermediate

Can column ordering affect accessibility or keyboard navigation?

Yes, because the HTML order stays the same, keyboard navigation follows the HTML order, not the visual order. So use ordering carefully.

beginner

Why is column ordering useful in responsive design?

It lets you rearrange content visually on different devices without rewriting HTML, making layouts flexible and user-friendly.

Which Bootstrap class changes the order of a column on all screen sizes?

A col-2

B order-2

C offset-2

D order-md-2

The class order-2 changes the order on all screen sizes. order-md-2 only affects medium and larger screens.

What happens if you use order-1 on a column?

A It hides the column

B It adds padding to the column

C It moves the column to the first position visually

D It changes the column width

order-1 moves the column to the first visual position among its siblings.

Which statement is true about Bootstrap column ordering?

A It changes the visual order only

B It changes the HTML source order

C It removes columns from the layout

D It changes the column width

Column ordering changes only how columns appear visually, not the HTML source order.

If you want a column to appear last on small screens but first on large screens, which classes might you use?

A order-last order-lg-first

B order-first order-lg-last

C order-1 order-lg-12

D order-lg-last order-first

order-last makes it last on small screens, and order-lg-first makes it first on large screens.

Why should you be careful using column ordering with screen readers?

A Screen readers ignore column ordering classes

B Screen readers cannot read columns with ordering

C Screen readers reorder content automatically

D Screen readers read content in HTML order, not visual order

Screen readers follow the HTML source order, so visual reordering might confuse users if content order is important.

Explain how Bootstrap's column ordering works and why it is useful in responsive design.

Think about how you might want content to appear differently on phones versus desktops.

Describe potential accessibility considerations when using column ordering in Bootstrap.

Consider how someone using a keyboard or screen reader experiences the page.

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