Simpler code to convert table to panels on small browser widths

Issue

I'm using the ASP.NET MVC framework to create an app. I need to display a table on a page that switches to a paneled view for each record like below.

Large browser width:

Smaller browser width:

Now here I have code for this that does this very thing. I use bootstrap's rows, columns, and display classes to show and hide html elements based on the browser width.

The problem with my code is that it quickly gets complicated and hard to comprehend if a table needs more columns, which mine does. Since bootstrap's rows are sectioned into 12 columns, I have to manually adjust how much space each column should take up at different widths. I even split some columns into more columns to balance out spacing.

Is there any way I can achieve this effect with simpler code or some plugin that automatically balances out column spacing like the <table> tag does?

I know another solution would be to have two separate designs and use bootstrap's display classes to hide and show them. But I don't like this solution since it requires me to fully recreate html for the same data.

Solution

Why not just use table with data-label? I just helped someone on reddit with a similar question. You can do something like

<td data-label="Name">

table td::before {
  content: attr(data-label);
}

See a quick reference here: responsive table with vertically stacked cells

Minimally styled version: https://jsfiddle.net/2ueodzx4/

Answered By - Jay T