Create responsive row with constant div width w/ bootstrap

Question

I'd like to create a responsive row like so using bootstrap:

First pic: before (large screen) Second pic: after (smaller screen) The width of the containers should remain constant

Any help will be appreciated

Kind Regards

EDIT - Code I've tryed:

<div class="container-fluid"> 
<div class="row"> 
   <div class="col-md-2 col-sm-2"> 
    <div class="chart-wrapper"> 
     <div class="chart-title" style="height:60px;"> TEST </div> 
    <div class="chart-stage"> asp generated chart png </div> 
   <div class="chart-notes"> Comment </div> 
 </div> 
</div>

Answer 1

You can use bootstrap grid system http://getbootstrap.com/css/#grid

for the above item you can use like this

<div class="row">
  <div class="col-xs-12 col-md-4 col-lg-3">.col-xs-12 .col-md-4 col-lg-3</div>
  <div class="col-xs-12 col-md-4 col-lg-3">.col-xs-12 .col-md-4 col-lg-3</div>
  <div class="col-xs-12 col-md-4 col-lg-3">.col-xs-12 .col-md-4 col-lg-3</div>
  <div class="col-xs-12 col-md-4 col-lg-3">.col-xs-12 .col-md-4 col-lg-3</div>
</div>

alse for each div you can use

div{
display:flex
}

Answer 2

You can do this with media queries :- First add this line And then make different blocks for different devices using css classes. As given below.

    <div class="visible-1">
    content for smaller screen//
    </div>
    <div class="visible-3">
    content for small screen//
    </div>

    <div class="visible-4">
    content for Desktop//
    </div>



<style>
    .visible-1{
    @media (max-width: 240px) { more css }
    }

    .visible-3{
    @media (max-width: 480px) { more css }
    }

    .visible-4{
    @media (min-width: 768px) { more css }
    }
</style>

Answer 3

This should do it:

  <div class="container-fluid"> 
    <div class="row"> 
       <div class="col-lg-3 col-md-4 col-sm-12 "> 
        <div class="chart-wrapper"> 
         <div class="chart-title" style="height:60px;"> TEST </div> 
        <div class="chart-stage"> asp generated chart png </div> 
       <div class="chart-notes"> Comment </div> 
     </div> 
   </div>
 </div> 
</div>