Responsive Bootstrap Columns and Rows

index.html

<!-- 6 columns -->
<h3>6 Columns</h3>
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-4 col-lg-2"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-4 col-lg-2"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-4 col-lg-2"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-4 col-lg-2"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-4 col-lg-2"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-4 col-lg-2"</p>
      </div>
    </div>
    
  </div>
</div>


<!-- 4 columns -->
<h3>4 Columns</h3>
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-3"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-3"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-3"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-3"</p>
      </div>
    </div>
    
  </div>
</div>


<!-- 3 columns -->
<h3>3 Columns</h3>
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-4">
      <div class="box">
        <p>class="col-xs-12 col-sm-4"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-4">
      <div class="box">
        <p>class="col-xs-12 col-sm-4"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-4">
      <div class="box">
        <p>class="col-xs-12 col-sm-4"</p>
      </div>
    </div>
    
  </div>
</div>


<!-- 3 columns -->
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-3"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-3"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-12 col-md-6">
      <div class="box">
        <p>class="col-xs-12 col-sm-12 col-md-6"</p>
      </div>
    </div>
    
  </div>
</div>


<!-- 3 columns offset Center -->
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-3"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-6">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-6"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-12 col-md-3">
      <div class="box">
        <p>class="col-xs-12 col-sm-12 col-md-3"</p>
      </div>
    </div>
    
  </div>
</div>

<!-- 3 columns offset Center -->
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-6 col-md-2">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-2"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-8">
      <div class="box">
        <p>class="col-xs-12 col-sm-6 col-md-8"</p>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-12 col-md-2">
      <div class="box">
        <p>class="col-xs-12 col-sm-12 col-md-2"</p>
      </div>
    </div>
    
  </div>
</div>



<!-- 2 columns -->
<h3>2 Columns</h3>
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-6">
      <div class="box">
        <p>class="col-xs-12 col-sm-6"</P>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-6">
      <div class="box">
        <p>class="col-xs-12 col-sm-6"</P>
      </div>
    </div>
    
  </div>
</div>



<!-- 2 columns -->
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-4">
      <div class="box">
        <p>class="col-xs-12 col-sm-4"</p>
      </div>
    </div>
    
    
    <div class="col-xs-12 col-sm-8">
      <div class="box">
        <p>class="col-xs-12 col-sm-8"</p>
      </div>
    </div>
    
  </div>
</div>



<!-- 2 columns offset -->
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-9">
      <div class="box">
        <p>class="col-xs-12 col-sm-9"</p>
      </div>
    </div>
    
    
    <div class="col-xs-12 col-sm-3">
      <div class="box">
        <p>class="col-xs-12 col-sm-3"</p>
      </div>
    </div>
    
  </div>
</div>



<!-- 1 column -->
<h3>1 Column</h3>
<div class="container">
  <div class="row">
    
    <div class="col-xs-12">
      <div class="box">
        <p>class="col-xs-12"</p>
      </div>
    </div>

  </div>
</div>

responsive-bootstrap-columns-and-rows.markdown

Responsive Bootstrap Columns and Rows

A Pen by Christopher Cook on CodePen.

License.

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

body {
  text-align: center;
  text-transform: uppercase;
  padding: 50px 0;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #aaa;
  margin: 20px 0;
  padding: 10px;
  width: 100%;
  min-height: 200px;
  border: 2px #ccc solid;
  color: #fff;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />