JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%">
<thead>
<tr>
<th><a href="#">Detail 1</a></th>
<th><a href="#">Detail 2</a></th>
<th><a href="#">Detail 3</a></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Detail 1: ">Detail 1 Here</td>
<td data-label="Detail 2: ">Detail 2 Here</td>
<td data-label="Detail 3: ">Detail 3 Here</td>
</tr>
<tr>
<td data-label="Detail 1: ">Detail 1 Here</td>
<td data-label="Detail 2: ">Detail 2 Here</td>
<td data-label="Detail 3: ">Detail 3 Here</td>
</tr>
<tr>
<td data-label="Detail 1: ">Detail 1 Here</td>
<td data-label="Detail 2: ">Detail 2 Here</td>
<td data-label="Detail 3: ">Detail 3 Here</td>
</tr>
</tbody>
</table>

CSS

@media only screen and (max-width: 800px) {
TABLE TBODY {float:left}
TABLE TBODY TR {float:left}
TABLE TD {float:left}
TABLE TD:Before {float:left;content:attr(data-label)}
}