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.