Tengo este problema, ¿hay alguna manera de cambiar el orden de td y th con la clase de "prueba" de modo que sea la primera columna en el dispositivo móvil pero se mueva a la última columna en el escritorio? Gracias.
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col" class="testing">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td class="testing">@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td class="testing">@fat</td> </tr> </tbody> </table>Aquí hay un ejemplo usando flex y la propiedad order css. Utilicé la propiedad hover porque es más fácil de probar que cambiar el tamaño del fragmento, pero podría cambiar el estilo de hover a media query y verificar el tamaño de la pantalla.
table { border-collapse: collapse; } td { border: 1px solid black; padding: 0.2rem 0.6rem; } tr { display: flex; } td:nth-child(0) { order: 0; } td:nth-child(1) { order: 1; } td:nth-child(2) { order: 2; } td:nth-child(3) { order: 3; } td:nth-child(4) { order: 4; } td:nth-child(5) { order: 5; } .fl { background-color: lightgreen; } .lf { background-color: pink; } table:hover .fl { order: 5; } table:hover .lf { order: 0; } <table> <tr> <td class="fl">first no-hover, last hover</td> <td>second</td> <td>third</td> <td>fourth</td> <td class="lf">first hover, last no-hover</td> </tr> </table>