Bootsrapmarkup~20 mins

Column ordering in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Bootstrap Column Ordering

📖 Scenario: You are creating a simple webpage layout using Bootstrap. You want to arrange three columns in a row, but you want the second column to appear first on the screen, the first column to appear second, and the third column to appear last.

🎯 Goal: Build a Bootstrap row with three columns. Use Bootstrap's column ordering classes to reorder the columns so that the second column appears first, the first column appears second, and the third column appears last on all screen sizes.

📋 What You'll Learn

Use Bootstrap 5 classes for layout and ordering

Create a row with three col elements

Apply Bootstrap order classes to reorder columns as specified

Ensure the HTML structure is valid and semantic

💡 Why This Matters

🌍 Real World

Web developers often need to reorder content visually without changing the HTML structure. Bootstrap's column ordering helps create flexible, responsive layouts.

💼 Career

Understanding Bootstrap grid and column ordering is essential for front-end developers building responsive websites and user interfaces.

Progress0 / 4 steps

Create the Bootstrap row with three columns

Write the HTML code to create a div with class row. Inside it, create three div elements each with class col. The first column should contain the text Column 1, the second column Column 2, and the third column Column 3.

Bootsrap

Need a hint?

Use a div with class row to hold the columns. Each column is a div with class col.

Add Bootstrap order classes to columns

Add Bootstrap order classes to each column div to prepare for reordering. Add order-2 to the first column, order-1 to the second column, and order-3 to the third column.

Bootsrap


  Column 1 
  Column 2 
  Column 3

Need a hint?

Use Bootstrap's order-* classes to set the order of each column.

Wrap the row in a container

Wrap the existing row div inside a div with class container to center the content and add horizontal padding.

Bootsrap



  Column 1
  Column 2
  Column 3

Need a hint?

Use a div with class container around the row.

Add Bootstrap CSS link in the head

Add the Bootstrap 5 CSS CDN link inside the <head> section of your HTML document to enable Bootstrap styles.

Bootsrap




  



  
    Column 1
    Column 2
    Column 3

Need a hint?

Use the official Bootstrap 5 CSS CDN link inside the <head> tag.