How to change number of column in a row on resize - Bootstrap

Question

I need some help to change number of columns in a row dynanamically when resizing window. For example, for large and medium screen, there should be 3 columns in a row, for s

Answer 1

This is a good example of when to use Bootstrap's column wrapping.

Put all of the columns in 1 .row...

http://www.codeply.com/go/zyTOcNXo0m

<div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 1
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 2
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 3
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 4
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 5
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 6
    </div>
</div>

http://www.codeply.com/go/zyTOcNXo0m

Answer 2

Responsive Grid view for bootstrap

 <div class="container">
      <div class="row">
         <div class="col-lg-4 col-sm-6 col-xs-12"></div>
         <div class="col-lg-4 col-sm-6 col-xs-12"></div>
         <div class="col-lg-4 col-sm-12 col-xs-12"></div>
      </div>
 </div>