<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div id="benefits-table" class="comparison-table"> <table id="table"> <tbody> <thead> <tr> <th class="first"><p>Benefit</p></th> <th><p>Ubiquinol</p></th> <th><p>Conventional Q10</p></th> </tr> </thead> <tr> <td data-title="Benefit" class="wide"><p>Required for 95% of your cellular energy production¹⁹</p></td> <td data-title="Ubiquinol"><img src="{{media url="wysiwyg/green-check.jpg"}}" alt="Checked" /></td> <td data-title="Conventional Q10"><img src="{{media url="wysiwyg/green-check.jpg"}}" alt="Checked" /></td> </tr> <tr> <td data-title="Benefit" class="wide"><p>Superior bioavailability^10-12</p></td> <td data-title="Ubiquinol"><img src="{{media url="wysiwyg/green-check.jpg"}}" alt="Checked" /></td> <td data-title="Conventional Q10"> </td> </tr> <tr> <td data-title="Benefit" class="wide"><p>Easily absorbed by the human body.</p></td> <td data-title="Ubiquinol"><img src="{{media url="wysiwyg/green-check.jpg"}}" alt="Checked" /></td> <td data-title="Conventional Q10"> </td> </tr> <tr> <td data-title="Benefit" class="wide"><p>Optimally replenishes ubiquinol in your body to protect and provide cellular energy^10-15</p></td> <td data-title="Ubiquinol"><img src="{{media url="wysiwyg/green-check.jpg"}}" alt="Checked" /></td> <td data-title="Conventional Q10"> </td> </tr> <tr> <td data-title="Benefit" class="wide"><p>Predominant form of CoQ10 in a healthy body^3,4,13,16-18</p></td> <td data-title="Ubiquinol"><img src="{{media url="wysiwyg/green-check.jpg"}}" alt="Checked" /></td> <td data-title="Conventional Q10"> </td> </tr> </tbody> </table> </div>

@media only screen and (max-width: 800px) { /* Force table to not be like tables anymore */ #benefits-table table, #benefits-table thead, #benefits-table tbody, #benefits-table th, #benefits-table td, #benefits-table tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #benefits-table thead tr { position: absolute; top: -9999px; left: -9999px; } #benefits-table tr { border: 1px solid #ccc; } #benefits-table td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; } #benefits-table td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ #benefits-table td:before { content: attr(data-title); } }