Responsive table that converts to card layout

Hi all

I’m trying to create a responsive table layout that on small screen sizes changes to more of a card layout.

On desktop I’d like the table layout to have columns that can have widths with min a max values and some that are responsive and so change when the window is resized.

I sort of have this working here

where I’m using display table to create and table structure and then removing it on mobile.

I can’t set min/max width values on the table but I don’t think thats possible on normal tables.

My questions is, is this the best way to do this. I’ve tried with flex but it seems more problematic.