Best way to approach responsive grid/table where cells overflow

It's been a long time since I needed HTML and CSS help, so this is either a doozy or I'm still a moron.

I've been designing a POS app for restaurants in my free time. I didn't give too much consideration to responsiveness as it would be running in a fixed size kiosk, but the scope has expanded and I now want everything responsive. 9 out of 10 pages I've had no problem converting, but this one is getting to me. I had previously created it and got it working fine with tables and nested divs in each cell.

So basically I have a 6*8 grid of buttons. Easy enough. Except I want to preserve customizability across screen sizes - so each button has a class - normal, doubleHeight, doubleWidth OR doubleWidthAndHeight. What they do should be self explanatory and each button has a specified cell, and if the height or width exceeds the cell, the button simply overflows it and occupies the next cell as well.

Here's an example image of what it (used to) look like:



The code for that would be:

<tr>
    <td><!--[Burger button.doubleWidthAndHeight--></td>
    <td></td>
    <td><!--[Remove Pineapple button.normal--></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
     <td></td>
    <td></td>
    <td><!--[Add bacon  button.normal--></td>
    <td></td>
    <td></td>
    <td></td>
</tr>

Code (markup):

However I'm really not sure how to approach this fluidly. The div it is contained within a flex container. I'm contemplating doing it entirely with flex items but can't figure out a way to mark that up. I would like each button to be defined in terms of percentage relative to the container rather than em or px (but then it's impossible to have 200% width or height). Applying percentage widths to td also seems to be giving me issues, but the code is so broken due to experimentation right now so I'm not 100% sure. Have toyed with rowspan and colspan too.

Any ideas would be welcome.

 

Nevermind, I think I've got this.

 

You want to wrap it to a new line and then make the cells as big as they need to be.

 

My question would be what the blazes makes that tabular data? It looks like you're using tables for layout, a relic that should have gone the way of the dodo two DECADES ago.