Hi Lori
You correctly recognise that HTML tables are not responsive and need to replaced with an alternative such as a grid.
Let's compare the markup that the Loop Wizard generates when creating a table vs. creating a grid.
Table first (edited by me for the header and footer):
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%">
<thead>
<tr>
<th>Post link</th>
<th>Post date</th>
<th>Status</th>
<th>Excerpt</th>
</tr>
</thead>
<tbody class="wpv-loop js-wpv-loop">
<wpv-loop>
<tr>
[wpv-post-body view_template="loop-item-in-table-of-tasks"]
</tr>
</wpv-loop>
</tbody>
<tfoot>
<tr>
<th colspan="4">Some text</th>
</tr>
</tfoot>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
And here's what it looks like for a 4-col Bootstrap grid:
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-3">[wpv-post-body view_template="loop-item-in-responsive-table-of-tasks"]</div>
[wpv-item index=2]
<div class="col-sm-3">[wpv-post-body view_template="loop-item-in-responsive-table-of-tasks"]</div>
[wpv-item index=3]
<div class="col-sm-3">[wpv-post-body view_template="loop-item-in-responsive-table-of-tasks"]</div>
[wpv-item index=4]
<div class="col-sm-3">[wpv-post-body view_template="loop-item-in-responsive-table-of-tasks"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-3"></div>
[wpv-item index=pad-last]
<div class="col-sm-3"></div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
In both cases the linked content template includes four fields (title, date, status taxonomy, and excerpt), but in the case of the table it importantly includes table markup too:
<td>[wpv-post-link]</td>
<td>[wpv-post-date]</td>
<td>[wpv-post-taxonomy type="status"]</td>
<td>[wpv-post-excerpt]</td>
What you can hopefully see is that the Loop section with a table inserts the same thing every time: a row and whatever is in the linked template (row cells). Fields from one post are spread across a table row, and each row is one post.
The Bootstrap grid is conceptually different. Each item in the grid is one post, and a row contains as many posts as our grid has columns.
To make a grid that is more like a table (one post per row) we need to re-jig the markup so that each row includes the contents of the linked template, and that template adds the divs which split the content into Bootstrap columns.
So the Loop Editor looks like this (including rows for a header and footer that you edit as required):
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<div class="row">Some header stuff</div>
<wpv-loop>
<div class="row">
[wpv-post-body view_template="loop-item-in-responsive-table-of-tasks"]
</div>
</wpv-loop>
<div class="row">Some footer stuff</div>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
And then the template includes the column divs (much like the table view template includes the td elements):
<div class="col-sm-3">[wpv-post-link]</div>
<div class="col-sm-3">[wpv-post-date]</div>
<div class="col-sm-3">[wpv-post-taxonomy type="status"]</div>
<div class="col-sm-3">[wpv-post-excerpt]</div>
You'll have some styling considerations such as adding borders etc., but that's functionally how you use a grid to create a responsive "table".
