<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <table class="table table-condensed taken table-no-more"> <thead> <tr> <th>Qtr</th> <th colspan="2">Course Name</th> <th>Credits</th> <th>Grade</th> <th><span class="sr-only">Notes</span></th> </tr> </thead> <tbody> <tr class=""> <td class="term" data-title="Qtr">AU11</td> <td class="course linkify" data-title="Course Name">ART 1XX</td> <td class="description" data-title="">TRANSFER COURSE</td> <td class="credit" data-title="Credits">5</td> <td class="grade" data-title="Grade">3.3</td> <td class="ccode" data-title=""><span title="The course is repeatable.">>R</span></td> </tr> <tr class=""> <td class="term" data-title="Qtr">WI12</td> <td class="course linkify" data-title="Course Name">TRAIN 101</td> <td class="description" data-title="">INTRO TRAIN I</td> <td class="credit" data-title="Credits">2</td> <td class="grade" data-title="Grade">3.7</td> <td class="ccode" data-title=""><span title="This course has been retaken.">DP</span></td> </tr> <tr class="ip"> <td class="term" data-title="Qtr">AU13</td> <td class="course linkify" data-title="Course Name">HIST 250</td> <td class="description" data-title="">JEWISH CULTURAL HIST <br><br>EQUAL TO: 0HSTCMP250</td> <td class="credit" data-title="Credits">0</td> <td class="grade" data-title="Grade">X</td> <td class="ccode" data-title=""> </td> </tr> <tr class=""> <td class="term" data-title="Qtr">SU14</td> <td class="course linkify" data-title="Course Name">GWSS 200</td> <td class="description" data-title="">INTRO WOMEN STUDIES</td> <td class="credit" data-title="Credits">5</td> <td class="grade" data-title="Grade">3.0</td> <td class="ccode" data-title=""> </td> </tr> </tbody> </table>

@media only screen and (max-width: 767px) { table.table.table-no-more { width: 100%; } /* Force table to not be like tables anymore */ table.table.table-no-more, table.table.table-no-more thead, table.table.table-no-more tbody, table.table.table-no-more th, table.table.table-no-more td, table.table.table-no-more tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ table.table.table-no-more thead tr { position: absolute; top: -9999px; left: -9999px; } table.table.table-no-more tr { border: $base-border-style; } table.table.table-no-more td { /* Behave like a "row" */ border: none; border-bottom: $base-border-style; position: relative; padding: 0 0 0 30% !important; white-space: normal !important; text-align:left; } table.table.table-no-more td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 25%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; } /* Label the data */ table.table.table-no-more td:before { content: attr(data-title); } }