Order left sidebar to bottom right in mobile view using Bootstrap

There are two major components in website view- one is the actual content and the other is the left sidebar.

If you are developing a blog or any admin dashboard or filter for an e-commerce website, a left sidebar is required.

Left-sidebar and content are shown side-by-side on the website.

But in the case of mobile, we don’t want to display them side-by-side. We don’t have enough space.

Showing the left sidebar first and then the content is also not user-friendly.

In mobile view, you must want to display the left sidebar item at the bottom of the content item.

To achieve this using Bootstrap, there is a provision of responsive utility classes defined in the Bootstrap framework.

It’s very simple.

You don’t need to add any extra CSS code.

Here is the simple code snippet to reorder the web design layout items.

<div class="container">
  <div class="row">
    <div class="col-md-4 order-md-1">Sidebar</div>
    <div class="col-md-8 order-md-2">Content</div>  </div>
</div>

In the above code example, the order-md-X classes control the order of columns for medium-sized screens and above. 

As I said earlier, for mobile view screens (screens smaller than the medium, usually 768px), I’m sure you want to reorder the items and display the left sidebar to the bottom right. 

But, bootstrap does not provide any built-in class to do this for mobile.

No worries, you can use custom CSS accompanied with the existing Bootstrap classes to achieve this:

Here’s the simple code snippet to reorder items from the left side to the bottom right in mobile view using Bootstrap. It will not impact your web view.

<style>
  @media (max-width: 767px) {
    .mobile-order-last {
      order: 4; /* Reorder items to the bottom right */
    }
  }
</style>

<div class="container">
  <div class="row">
    <div class="col-md-4 order-1 order-md-1">Sidebar</div>
    <div class="col-md-8 order-2 order-md-2 order-mobile-last">Content</div>
  </div>
</div>

In this example, we have added a custom CSS class mobile-order-last and defined CSS for this new class. It will bring the left-sidebar item to the bottom of the content for mobile view.

The order-1 and order-2 bootstrap-defined classes ensure that the order is maintained correctly for medium-sized screens and above.

Similarly, you can adjust the styles and bootstrap classes according to your website-specific design and layout requirements.

Using these proper bootstrap order classes, you can display your right sidebar on the left side.

I love Bootstrap. It does the wonder by just adding a few class names—no need for long and lengthy CSS code.

How’s your experience working with the bootstrap?

Aniruddha Chaudhari

I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on <b>CSEstack.org</b> portal.