Column ordering in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the second column appear first on medium screens.

Bootsrap

<div class="row">
  <div class="col-md-6">First column</div>
  <div class="col-md-6 [1]">Second column</div>
</div>

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

Aorder-md-2

Border-md-0

Corder-md-first

Dorder-md-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'order-md-0' which does not make the second column appear first.

Using 'order-md-2' which places the column after the first.

The class 'order-md-first' moves the second column to appear before the first on medium screens.

2fill in blank

medium

Complete the code to make the first column appear last on large screens.

Bootsrap

<div class="row">
  <div class="col-lg-4 [1]">First column</div>
  <div class="col-lg-8">Second column</div>
</div>

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

Aorder-lg-last

Border-lg-12

Corder-lg-2

Dorder-lg-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'order-lg-12' which is not a valid Bootstrap order class.

Using 'order-lg-0' which does not change the order.

The class 'order-lg-last' moves the first column to the last position on large screens.

3fill in blank

hard

Fix the error in the code to correctly reorder columns on small screens.

Bootsrap

<div class="row">
  <div class="col-sm-6 [1]">Left column</div>
  <div class="col-sm-6">Right column</div>
</div>

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

Aorder-sm-3

Border-sm-1

Corder-sm-0

Dorder-sm-first

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'order-sm-0' which does not reorder the column.

Using 'order-sm-3' which places the column last but may not be intended.

The class 'order-sm-first' correctly moves the column to the first position on small screens.

4fill in blank

hard

Fill both blanks to reorder columns: make the first column second and the second column first on extra large screens.

Bootsrap

<div class="row">
  <div class="col-xl-6 [1]">First column</div>
  <div class="col-xl-6 [2]">Second column</div>
</div>

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

Aorder-xl-2

Border-xl-1

Corder-xl-0

Dorder-xl-last

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'order-xl-last' which places a column last but does not swap order.

Using the same order number for both columns.

Assigning 'order-xl-2' to the first column and 'order-xl-1' to the second column swaps their order on extra large screens.

5fill in blank

hard

Fill all three blanks to create a row with three columns where the middle column appears first, the last column second, and the first column last on large screens.

Bootsrap

<div class="row">
  <div class="col-lg-4 [1]">First</div>
  <div class="col-lg-4 [2]">Second</div>
  <div class="col-lg-4 [3]">Third</div>
</div>

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

Aorder-lg-3

Border-lg-1

Corder-lg-2

Dorder-lg-last

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'order-lg-last' which always places a column last, not second.

Assigning the same order number to multiple columns.

Assigning 'order-lg-3' to the first column, 'order-lg-1' to the second, and 'order-lg-2' to the third column reorders them as requested on large screens.