Using Flex CSS and Bootstrap for a responsive layout

Question

I have been experimenting with full responsive layouts between desktops, tablet, and mobile phone sizes for a bit but am having trouble with the layout below.

I was using a grid layout from bootstrap but since it is two columns, as the width shrinks, the second column of two goes below the left, main content section. I want to split it up as the screen caps below state.

This is the starting view:

This is what I want to happen:

This would be the mobile phone view:

So the wide view will get shrunk during testing and I want it to jump to the mobile view where the top side bar goes above the main content and matches the width of the main content while the bottom sidebar does the same thing to the bottom.

It is easy to put both sidebars on the bottom but I want to try to figure out the possibility of splitting it up.

For testing I am using flexbox, css3 and bootstrap5+ and no plugins or javascript.

user_15273968 · Answer

Solution 1: You can use CSS float feature with float-end and float-start bootstrap classes ref:



  Sidebar Top
  Content
  Sidebar bottom

Go in Full page view and reduce browser width below 576px to see the responsive change.
I've used breakpoint small col-sm-* here, use different breakpoints to handle different devices.

There are only d-*-grid rules in entire boostrap v5.1.3 CSS file. Rest of the stuff is experimental.

Solution 2: Using flexbox, playing with order and wrap. Improved version of @Rana's answer:



  Content
  Sidebar Top
  Sidebar bottom

user_1391805 · Answer

You may want to try out Bootstrap's Flex order utility to achieve the desired result

https://getbootstrap.com/docs/5.0/utilities/flex/#order

Also, share a code example so others can see what you have already tried, I believe you may face some issues even with Flex's Order utility, but that depends on your HTML structure.

For such layout my preference would be to create a copy of the top column for mobile / desktop, and use d- utility to show hide the right one.


    
    
      
      
        sidebar top col (only for mobile)
      
      
      
        main col
      
      
      
        sidebar top col (only for desktop)
        sidebar bottom col

Example - https://jsbin.com/yidokokewu/1/edit?html,css,output

Alternatively if you are already using Bootstrap 5, then you should also consider using CSS Grid, Bootstrap 5 comes with a lot of useful utilities for that - https://getbootstrap.com/docs/5.1/layout/css-grid/

If you do not want to duplicate your HTML to show one on desktop and the other on mobile then CSS Grid for layout is the best choice - it has some learning curve but it is worth trying out

user_16846346 · Answer

You can try following properties

flex-flow: column;
flex-wrap: wrap/nowrap;
order: 1/2/3/....;

When screen-size reaches certain limit than change these values like in below snippet

.container {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  background-color: lightgray;
}

.containerBox {
  width: 50%;
}

.containerBox1 {
  background-color: lightgreen;
  order: 2;
}

.containerBox2 {
  background-color: yellow;
  order: 1;
}

.containerBox3 {
  background-color: lightblue;
  order: 3;
}

@media screen and (max-width: 700px) {
  .container {
    background-color: grey;
    flex-wrap: nowrap;
  }
  .containerBox {
    width: 100%;
  }
  .containerBox1 {
    order: 1;
  }
}



  Sidebar Top
  Content
  Sidebar bottom

user_15564095 · Answer

Using float-start for left column and float-end for right columns is the best solution. col-12 and col-sm-* were used only in order to defining width of columns. Avoid of using row class for parent div because this will force columns to act like flex items. Also clearfix class for parent div is required to prevent overlapping following elements.

More information about float: https://getbootstrap.com/docs/5.1/utilities/float/ More information about clear-fix: https://getbootstrap.com/docs/5.1/helpers/clearfix/



    Sidebar Top Area 
    Content
Some Text
Some Text
    Sidebar Bottom Area

user_13601391 · Answer

go to enter link description here or enter link description here




  Bootstrap Example
  
  
  
  



     
       
    
      col-12 col-sm-9
      col-12 col-sm-3

user_4114390 · Answer

.content {
  background-color: #faaa03;
  height: 500px;
}
.sidebarTop {
  background-color: #ccd0d5;
}
.sidebarBottom {
  background-color: #99d2f2;
}
.custom-row {
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}



  
    Content
    Sidebar Top Area
    Sidebar Bottom Area

Give this a Try

Using Flex CSS and Bootstrap for a responsive layout

6 Answers