Así que tengo una tabla HTML bastante primitiva, pero debería tener dos versiones: una para dispositivos móviles y otra para escritorio/tableta.

En la versión de escritorio, la tabla es normal: la información está en el lado izquierdo y los puntos correspondientes están en el lado derecho.

Ahora, en la versión móvil, debería haber un nuevo tablero que contenga el mismo texto en una fila de 2.

Hasta donde yo sé, esto no es posible hacerlo con CSS puro (consultas de medios)...

Soy consciente de que puede obtener la altura y el ancho de la ventana gráfica usando JavaScript, pero luego debe transmitirse a una API que proporcione el contenido correspondiente.

• ¿Este prototipo es bueno?:

El frontend envía una solicitud POST usando Fetch al Backend con los datos del ancho de la ventana gráfica y luego obtiene el HTML correspondiente del Backend a través de AJAX.

• ¿Funcionaría esto?
• Esto parece bastante engorroso y complicado para una funcionalidad tan básica. ¿Hay una mejor manera de hacer esto?

Mi pseudocódigo: 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"); }

back-end:

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

Estoy usando .NET Core para el backend si es importante.