Bootstrap 6 to 3 columns when resize

问题

I trying to coding with Bootstrap, and I have some questions. I have 6 columns in one row (6x1):

<div class="row">
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
    </div>

After screens go down, on first brakepoint I want 3x2:

<div class="row">
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
    </div>

And after that when screen become too small I want 1x6

Here is screenshoot:

Is that possible?

回答1:

I think this is what you're after:

<div class="row">
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
</div>

bootply example

At the medium break point and above you'll have all the divs in one row. At the small break point you'll have two rows of three columns. At the extra small break point you'll have a single column.

来源：https://stackoverflow.com/questions/28459664/bootstrap-6-to-3-columns-when-resize