<link rel="stylesheet" href="http://base.uskinned.net/css/base.css">
<!-- CONTAINER -->  
<div class="container">

  <!-- ROW --> 
  <div class="row">

    <div class="span2point2 cols first">
  
      1 of 5
      
    </div>
    
    <div class="span2point2 cols">
  
      2 of 5
      
    </div>

    <div class="span2point2 cols">
  
      3 of 5
      
    </div>
    
    <div class="span2point2 cols">
  
      4 of 5
      
    </div>
    
    <div class="span2point2 cols last">
  
      5 of 5
      
    </div>
    
  </div>
  <!-- ROW -->  

  <!-- ROW --> 
  <div class="row">

    <div class="span1point7 cols first">
  
      1 of 7
      
    </div>
    
    <div class="span1point7 cols">
  
      2 of 7
      
    </div>

    <div class="span1point7 cols">
  
      3 of 7
      
    </div>
    
    <div class="span1point7 cols">
  
      4 of 7
      
    </div>
    
    <div class="span1point7 cols ">
  
      5 of 7
      
    </div>
    
    <div class="span1point7 cols ">
  
      6 of 7
      
    </div>
    
    <div class="span1point7 cols last">
  
      7 of 7
      
    </div>
    
  </div>
  <!-- ROW -->  

  <!-- ROW --> 
  <div class="row">

    <div class="span1point3 cols first">
  
      1 of 9
      
    </div>
    
    <div class="span1point3 cols">
  
      2 of 9
      
    </div>

    <div class="span1point3 cols">
  
      3 of 9
      
    </div>
    
    <div class="span1point3 cols">
  
      4 of 9
      
    </div>
    
    <div class="span1point3 cols ">
  
      5 of 9
      
    </div>
    
    <div class="span1point3 cols ">
  
      6 of 9
      
    </div>
    
    <div class="span1point3 cols ">
  
      7 of 9
      
    </div>
    
    <div class="span1point3 cols ">
  
      8 of 9
      
    </div>
    
    <div class="span1point3 cols last">
  
      9 of 9
      
    </div>
    
  </div>
  <!-- ROW -->  

  <!-- ROW --> 
  <div class="row">

    <div class="span1point09 cols first">
      1 of 11
    </div>
    
    <div class="span1point09 cols">
      2 of 11
    </div>

    <div class="span1point09 cols">
      3 of 11
    </div>
    
    <div class="span1point09 cols">
      4 of 11
    </div>
    
    <div class="span1point09 cols ">
      5 of 11
    </div>
    <div class="span1point09 cols ">
      6 of 11
    </div>
    
    <div class="span1point09 cols">
      7 of 11
    </div>

    <div class="span1point09 cols">
      8 of 11
    </div>
    
    <div class="span1point09 cols">
      9 of 11
    </div>
    
    <div class="span1point09 cols ">
      10 of 11
    </div>
    
    <div class="span1point09 cols last">
      11 of 11
    </div>
    
  </div>
  <!-- ROW -->  

</div>
<!-- CONTAINER -->  

/* NEW STUFF */
.span2point2 {
  width:18.4%; /* 5 colums */
}
.span1point7 {
  width:12.571428%; /* 7 colums */
}
.span1point3 {
  width:9.333333%; /* 9 colums */
}
.span1point09 {
  width:7.272727%; /* 11 colums */
}

@media (max-width:767px) {

  .span2point2, 
  .span1point7,   
  .span1point3,
  .span1point09 {
    width:100%;
    }    
  
}


.cols {
  background-color:#ccc;/* ignore this line when implementing*/
  padding:10px 0;/* ignore this line when implementing*/
  text-align:center;/* ignore this line when implementing*/
  font-size:12px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.