responsive table w/ breakpoint changes 2

by Peter Aad

HTML

<table>
    <tr class="hidden-sm col-3">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="visible-sm col-2">
        <td>1</td>
        <td>2</td>
    </tr>   
    <tr class="hidden-sm col-3">
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr class="visible-sm col-2">
        <td>3</td>
        <td>4</td>
    </tr>    
    <tr class="hidden-sm col-3">
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr class="visible-sm col-2">
        <td>5</td>
        <td>6</td>
    </tr>        
</table>

CSS

table {width:100%;}
tr.col-3 td {width:33.33%;}
tr.col-2 td {width:50%;}
.visible-sm {display:none !important}
@media (max-width: 767px){ 
    tr.col-3 td {width:100%;display:block;}   
}
@media (min-width: 768px) and (max-width: 991px){
 .visible-sm {
  display:table-row !important;
 }
 .hidden-sm {
  display:none !important;
 }    
}