My Bootstrap table setup looks like this:
<table class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>LastName</th>
<th>Color</th>
<th>Car</th>
<th>Year</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/02/2017</td>
<td>Dan</td>
<td>Green</td>
<td>Blue</td>
<td>BMW</td>
<td>2016</td>
<td>100k</td>
</tr>
<tr>
<td>01/02/2017</td>
<td>Dan</td>
<td>Green</td>
<td>Blue</td>
<td>BMW</td>
<td>2016</td>
<td>100k</td>
</tr>
<tr>
<td>01/02/2017</td>
<td>Dan</td>
<td>Green</td>
<td>Blue</td>
<td>BMW</td>
<td>2016</td>
<td>100k</td>
</tr>
<tr>
<td>01/02/2017</td>
<td>Dan</td>
<td>Green</td>
<td>Blue</td>
<td>BMW</td>
<td>2016</td>
<td>100k</td>
</tr>
<tr>
<td>01/02/2017</td>
<td>Dan</td>
<td>Green</td>
<td>Blue</td>
<td>BMW</td>
<td>2016</td>
<td>100k</td>
</tr>
</tbody>
</table>
My goal is to change the table display on a breakpoint, for example, when the screen size is smaller than 768px. I'd like it to display like this:
DATE:01/05/2017
car:BMW
Then, when this row is clicked, I want to display:
Name:Dan
LastName:Green
Color:blue
Year:2016
I'm wondering if it's possible to achieve this using Bootstrap. Alternatively, I'm considering restructuring the elements into a list format instead of a table to adjust their display as cells on smaller screens. I initially thought of creating two different views and toggling them based on screen size, but I'm not sure how to proceed. As a beginner, I'm not familiar with the best practices or how to implement this, preferably using CSS only with JavaScript only required for showing/hiding on click.
For reference, here is a js fiddle Bootstrap Table
Any assistance would be greatly appreciated.