Col-12 appeared on top of the page

Components

• Accordion
• Alert
• Badge
• Breadcrumb
• Button
• ButtonGroup
• Card
• Carousel
• Collapse
• DropdownMenu
• Fade
• Form
• Input
• InputGroup
• Jumbotron
• Layout
• ListGroup
• Modal
• Nav
• Navbar
• Offcanvas
• Pagination
• Placeholder
• Popover
• Progress
• Spinner
• Table
• Tabs
• Toast
• Tooltip

A key aspect of responsive design that Bootstrap provides is the ability to change the position of content on different devices and screen widths.

Why Change Content Order?

A common use-case is a typical 2-column page layout. Often, the vertical stacking of columns is desired on smaller screen devices (tablets & phones) where horizontal space is limited. Arguably, this may also help with SEO as the main content is closer to the top of the page when search engines like Google crawl the page.

Using the we’re able to utilize the column ordering feature of the Bootstrap grid. On small (mobile) screens we want to show our main content at the top and then the sidebar nav below.

Flexbox Parent & Children

As you may know the Bootstrap 5 grid utilizes Flexbox. The concept of "parent & children" in Flexbox equates to the "row & columns" of the Bootstrap grid. One parent row containing one or more child columns...

    

         Child 1
    
    

         Child 2
    
    

         Child 3
    

Enter fullscreen mode Exit fullscreen mode

Natural vs. Visual Order

Notice that the natural order of the columns is:

Using the flex ordering CSS classes we can change the visual order of the columns...

      
 Child 1 
      
 Child 2 
      
 Child 3 

Enter fullscreen mode Exit fullscreen mode

Simple Bootstrap Ordering Demo

As you can see, the columns are in the same natural order, but the visual order has changed by using the order-* classes on the columns.

In practice, we would want to change the visual order depending on the screen width. For example, suppose I want this order on larger screens...

But on smaller screens I want this (natural) order...

We can achieve this using the responsive order-lg-* classes to control the larger (992px and wider) breakpoint:

    
 Child 1 
    
 Child 2 
    
 Child 3 

Enter fullscreen mode Exit fullscreen mode

See row 3 of the demo

Since Bootstrap provides many you can manipulate the position of columns in exhaustively many ways...

Here's the responsive Codeply with more re-ordering examples

Before wrapping-up let's revisit the 1st use-case of changing the order of a 2-column layout. The markup is soooo simple...

    
 Sidebar 
    
 Main 

Enter fullscreen mode Exit fullscreen mode

See row 4 of the demo

The use of order-sm-first order-last on the Sidebar translates to "order first on small and wider", and "order last on extra small (xs)".

I hope this has given you a little insight as to how ordering works in Bootstrap 5. Please share your thoughts and questions in the comments.

What does column 12 mean in Bootstrap?

Bootstrap uses a 12-column layout because the number 12 has more divisors than any number before it or after it, up until the number 60. With Bootstrap's 12-column layout, responsive webpages can be divided up six different ways: Halves (12/6) Thirds (12/4) Quarters (12/3)

What is the difference between Col 12 and Col MD 12?

A col-lg-12 is only 12 columns wide on a large screen, a col-md-12 is only 12 columns wide on a medium screen etc. So in a responsive layout a row can be anything from 1 column to 12 columns wide, and even vary by screen width. This is the whole point of a responsive layout.

Why do people use 12 column layouts?

Designers have not always used a 12 column grid but it is most commonly used in design today for the flexibility it allows. The number 12 is divisible in multiple ways, creating many different evenly-spaced columns. The number 12 can be divided by 1, 2, 3, 4, and 6, allowing for a multitude of design options.

Why did Bootstrap divide the grid into 12 imaginary columns?

12 is the default because it is the most flexible grid pattern over any possible numbers up to 12. Most versions of Bootstrap only use 12 columns to account for the following: Easier layout creation. Responsive layout for mobile devices.