Boostrap 5 Floating Columns split sidebar above and below main content

Question

I have not found a way to do this in Bootstrap 5 (previous stackoverflow answers appear to be all for older bootstrap versions).

I'm trying to have my main content on the left and a sidebar on the right. The sidebar on the right contains 2 sections which, in responsive mobile view, should move above and below the main content:

Looking at the Bootstrap 5 docs it appears you should be able to float the left column to the left and the right column to the right, like this:

<div class="row">
    <div class="col-md-8 ms-auto bg-info">
      Title
    </div>
    <div class="col-md-4 me-auto bg-success">
      Main Section
    </div>
    <div class="col-md-8 ms-auto bg-primary">
      Foot Notes
    </div>
  </div>

Can anyone give me a working example of how to do this using the native Bootstrap 5 classes?

score 1 · Accepted Answer · answered Apr 19 '21 at 13:41

This was possible in Bootstrap 4 by "disabling" flexbox on some breakpoints.

It can also be done in Bootstrap 5 in a similar way. Use d-md-block to disable flexbox on md (and up). Then use floats on the appropriate columns. Below md will still use flexbox and allow the columns to naturally order and stack vertically.

   <div class="row d-md-block">
      <div class="col-md-8 ms-auto bg-info float-end"> Title </div>
      <div class="col-md-4 me-auto bg-success float-start">
            Main Section
      </div>
      <div class="col-md-8 ms-auto bg-primary"> Foot Notes </div>
   </div>

Demo

Boostrap 5 Floating Columns split sidebar above and below main content

1 Answers1