Don't use a table, simply divide your page in to three columns and then use a list. Replace your table tag with a div and then add three sub div with class col-md-4 and put the h2 and lists inside those divs.

A technique I've occasionally used is an @media rule that says things like

table.complicated tr {display: block; margin: 1em 0;}
table.complicated td {display: block;}
table.complicated td:nth-child(2) {margin-left: 1em;}
table.complicated td:nth-child(3) {margin-left: 2em;}

This is for times when the material really is a table, conceptually: there are two dimensions of relationships, top-to-bottom and side-to-side. (In my case generally something of a linguistic nature, like a long list of parallel translations, or inflectional tables.) It then makes more sense to set it up as a table in the html, and then change the display for narrow viewports. Tables that are purely numeric can probably be safely left as tables.

:: running off in a panic as I realize that I've got something currently in the marinade that really needs this kind of handling, but I forgot ::

Thanks a ton Nick - wasnt too familiar with the use of that code and thought for sure I was gonna have to alter the css but I found a similar code used in another area of the template

<div class="col-xs-6 col-sm-4 col-md-3">

And was able to get the a 2 colum list vew of each category !

By the way - what is the md-4 - I saw that the md-3 worked fine though

wasnt too familiar with the use of that code

It's "Bootstrap" a css framework. It is the framework used to create your template.

Basically it has all the CSS predefined and named using a standardized format. For example in md-3 the "md" stands for medium, as in medium sized screen. The 3 is part of a ratio, the denominator being 12. It divides the screen into up to 12 columns. Calling 3 is really 3/12, thus 4 columns wide. md-3 will display 4 columns on any medium screen, and a single column on anything smaller. The different classes can also be combined:

<div class="col-xs-6 col-sm-4 col-md-3">

Should show 4 columns for anything equal to or larger than "medium", 3 columns for small screens, and 2 columns for extra small screen. I don't remember off hand what the exact pixel width for each designation is. I stopped using Bootstrap a while ago as I found it too bloated for my needs.

Quit BS too since tasted CSS Grid.