New PP list/tile display

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row">
        <div id="beerListContainer" class="col-md-12">
             <h3>Beers</h3>

            <div id="theToolbar" class="toolbar">
                <button class="btn btn-primary btn-sm toolbar-btn" type="button" id="tb-list-grid" title="click for card listing"><span class="glyphicon glyphicon-th"></span>

                </button>
                <button class="btn btn-primary btn-sm toolbar-btn" type="button" id="tb-list-table" title="click for table listing"><span class="glyphicon glyphicon-th-list"></span>

                </button>
            </div>
            <ul id="theList" class="theListCards center tableList">
                <li id="listHeader" class="thead affix-top">
                    <div class="left">
                        <div class="hidden-xs" width="20%">Item</div>
                        <div class="visible-xs">Item /
                            <div>Group</div>
                        </div>
                    </div>
                    <div class="left hidden-xs" width="20%">Group</div>
                    <div class="hidden"></div>
                    <div class="hidden"></div>
                    <div class="hidden"></div>
                    <div>
                        <div class="hidden-xs" width="20%">Level</div>
                        <div class="visible-xs">Level /
                            <div>Type</div>
                        </div>
                    </div>
                    <div class="hidden-xs" width="20%">Type</div>
                    <div width="20%">Avg. Score</div>
                </li>
                <li data-popsign="" class="card tr" id="li-248">
                    <div class="cardProp cardItem">Item 1<span class="cardGroup visible-xs">Group1</span>

                   ...

CSS

body {
    background-color: #200E0C;
}
#container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
.toolbar {
    padding: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.25);
}
h3 {
    color: #ffc;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 5px;
    margin-top: 10px;
}
.card {
    color: #fff;
    display: inline-block;
    margin: 4px 4px 10px;
    padding-top: 5px;
    text-align: center;
    white-space: nowrap;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.15);
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.25);
    width: 150px;
    min-width: 150px;
    font-size: 11px;
}
.cardProp {
    display: block;
    color: #fff;
    /*width: 20%;*/
}
.cardProp > span {
    color: #ccc;
}
.cardItem {
    padding: 1px;
    font-weight: bold;
}
li.card > div.cardProp > span.visible-xs {
    display: block !important;
}
.cardScore {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FF8C00;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
    line-height: 2em;
}
.cardImage {
    background-color: #fff;
    display: table-cell;
    height: 109px;
    width: 75px;
    vertical-align: middle;
    padding: 2px;
}
.cardImage > img {
    color: #888;
}
.cardPicture {
    font-size: 13px;
    white-space: normal;
}
#theList.tableList {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding-left: 0;
    border-collapse: collapse;
}
#theList, .tableList > li.card {
    padding-left: 0;
}
/* hide table header row by default */
 li.thead {
    display: none;
}
.tableList > li > div.cardImage {
    display: none !important;
}
.tableList > li.thead > div {
    display: table-cell;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
    font-weight: bold;
    width: 20%;
    padding: 5px;
}
.tableList .thead {
    display: table-header-group;
}
.tableList > li.tr {
    display: table-row;
    font-size: 14px;
   ...

JavaScript

// toolbar button handlers
$('#tb-list-grid').click(function () {
    $('#theList').removeClass('tableList');
    $('#listHeader').addClass('hidden');
});

$('#tb-list-table').click(function () {
    $('#theList').addClass('tableList');
    $('#listHeader').removeClass('hidden');
});

var $affixed1 = $("#theToolbar");

// To account for the affixed submenu being pulled out of the content flow.
var $placeholder = $affixed1.clone().addClass("affix-placeholder");
$affixed1.after($placeholder);

$affixed1.affix({
    offset: {
        top: 47
    }
})

var $affixed2 = $("#listHeader");

// To account for the affixed submenu being pulled out of the content flow.
var $placeholder = $affixed2.clone().addClass("affix-placeholder");
$affixed2.after($placeholder);

$affixed2.affix({
    offset: {
        top: 75
    }
})