The table gridlist is a special responsive component that is semanticly a table, and appears as a table from 768px and up. At 767px and below, its layout changes to one where the headers drop into the individual rows, and some basic grid classes allow you to control the layout at the xs and sm breakpoints. Add the .table-gridlist class to the table and add grid classes for your desired layout.

Data-Content

For the table headers to appear in the grid layout, you need a copy of what its associated header is added as a data attribute. Make sure each cell in the table body has data-content="Text of Header" added to it.

Grid Classes

The grid classes are very similar to the standard bootstrap grid classes, with no push/pull or offset options. It uses a 12-column system, with spacing related to table cell spacing instead of the standard gutter widths. Add classes .gridlist-xs-1 through .gridlist-xs-12 to your table cells in the xs breakpoint. Add classes .gridlist-sm-1 through .gridlist-sm-12 in the sm breakpoint if those need to change. Nothing is applied above the sm breakpoint.

Border Top on Cells

Add the .gridlist-add-rule to a full-width table cell that needs a divider to seperate it from content above.

Accessibility

There are a few things to consider when using gridlist tables:

When display: block; is used, it can remove all of the table semantics in the accessibility tree, so that column and row headers are no longer associated with cells and the table is not announced as a table in some screen readers.
This pattern uses pseudo content to replicate table headers which is not read by all screen readers.

In testing neither of the above were a factor and content in this example could be understood. Here‘s two resources with more information:

Short note on what CSS display properties do to table semantics
CSS content: property - Screen reader compatibility

Date	Description	Total
01/27/2016	Personal training session with Mark – Cardio	$1,250.00
01/17/2016	Refund of dues	+ $20.00
01/12/2016	Membership payment	$80.00
01/07/2016	Customer service error – Balance removal	+ $25.00
01/05/2016	Promotional deal - Smoothie	$11.00