responsive table w/ breakpoint changes

by Peter Aad

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="col-xs-12 div-table">
 <div class="row div-table-row hidden-sm">
  <div class="col-xs-12 col-sm-4 div-table-cell">1</div>
  <div class="col-xs-12 col-sm-4 div-table-cell">2</div>
  <div class="col-xs-12 col-sm-4 div-table-cell">3</div>
 </div>
 <div class="row div-table-row visible-sm visible-sm-table-row">
  <div class="col-sm-6 div-table-cell">1</div>
  <div class="col-sm-6 div-table-cell">2</div>
 </div>
</div>
<div class="col-xs-12 div-table">
 <div class="row div-table-row hidden-sm">
  <div class="col-xs-12 col-sm-4 div-table-cell">4</div>
  <div class="col-xs-12 col-sm-4 div-table-cell">5</div>
  <div class="col-xs-12 col-sm-4 div-table-cell">6</div>
 </div>
 <div class="row div-table-row visible-sm visible-sm-table-row">
  <div class="col-sm-6 div-table-cell">3</div>
  <div class="col-sm-6 div-table-cell">4</div>
 </div>
</div>
<div class="col-xs-12 div-table">
 <div class="row div-table-row hidden-sm">
  <div class="col-xs-12 col-sm-4 div-table-cell">7</div>
  <div class="col-xs-12 col-sm-4 div-table-cell">8</div>
  <div class="col-xs-12 col-sm-4 div-table-cell">9</div>
 </div>
 <div class="row div-table-row visible-sm visible-sm-table-row">
  <div class="col-sm-6 div-table-cell">5</div>
  <div class="col-sm-6 div-table-cell">6</div>
 </div>
</div>

CSS

@media (min-width:768px){
 .div-table{display:table;}
 .div-table-row{display:table-row}
 .div-table-cell{display:table-cell;float:none}
}
@media (min-width: 768px) and (max-width: 991px){
 .visible-sm-table-row {
  display:table-row !important;
 }
}