<table>
                    <thead>
                        <tr>
                            <th class="col-xs-1">#</th>
                            <th id="when" class="col-xs-2">When</th>
                            <th class="col-xs-5">Track ID</th>
                            <th class="col-xs-2 tracklink"><i class="fa fa-soundcloud" aria-hidden="true"></i></th>
                            <th id="buy" class="col-xs-1 tracklink"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i></th>
                            <th class="col-xs-1" id="audio"></th> <!-- column to show sound icon when playing-->
                        </tr>
                    </thead>
                    <tbody id='trackinfo'>
                        <tr>
                            <td id='order' class="col-xs-1">1</td>
                            <td id='timecue' class="col-xs-2">00:00</td>
                            <td id='song' class="col-xs-5 song-tracklist">Korama - Pretty Baby</td>
                            <td id='link' class="col-xs-2 tracklink"><a href='http://www.google.fr' target="_blank" class="tracklink">Link</a></td>
                            <td id='link' class="col-xs-1 tracklink"><a href='http://www.google.fr' target="_blank" class="tracklink">Link</a></td>
                            <td class="col-xs-1" id="audio"><i class="fa fa-volume-up tracklink-icon" aria-hidden="true"></i></td>
                        </tr>
                    </tbody>
                </table>

@media screen and (max-width: 700px) {
  #audio{
display: none; }
}

@media screen and (max-width: 700px) {
th td .col-xs-6 {
display: block; }
}
@media screen and (max-width: 700px) {
th td .col-xs-5 {
display: none; }
}

@media screen and (min-width: 700px) {
th td .col-xs-6 {
display: none; }
}
@media screen and (min-width: 700px) {
th td .col-xs-5 {
display: block; }
}