How do you serve this different HTML version depending on viewport width?

So I have a rather primitive HTML table, but it should have two versions – one for mobile, one for desktop/tablet.

In the desktop version the table is normal – information is on the left side and the corresponding points are at the right side.

Now in the mobile version there should be a new tablerow which contains the same text in a rowspan of 2.

As far as I am aware, this isn’t possible to do with purely CSS (media queries)…

I am aware you can get the viewport height and width using JavaScript, but then it should be transmitted to an API which gives corresponding content.

  • Is this prototype any good?:

The frontend sends a POST request using Fetch to the Backend with the data of the viewport width and then fetches the corresponding HTML from the Backend via AJAX.

  • Would this work?
  • This looks rather cumbersome and complicated for such basic functionality. Is there a better way to do this?

My pseudocode:
Frontend:

var width = getViewportwidth();
var xhr = new XMLHttpRequest();
xhr.open(width, url);

.fetch(API URL here, options here etc).then {
Ajax call here.addtodomhere("#domelement");
}

Backend:

[/Apiurlhere]
[GET]
if (width) < 600 {
table markup for mobile view here
} else {
table markup for desktop view here 
}

I am using .NET Core for the Backend if it matters.