Desktop is class List and Mobile is class Grid

Question

<input type="radio" class="list" checked> <!-- checked, desktop -->
<input type="radio" class="grid"> <!-- checked, mobile -->

Here class list is desktop and mobile. I know it is css media screen. How can I change the mobile is class grid and desktop is class list? Now it is only list on the first, both desktop and mobile.

Answer 1

If we suppose that you have mobile version with max resolution to 980px you can use media query with max width 980 for mobile. In this media query you stop list item to be displayed. On the other side on desktop where media have min resolution 981px, you will set the grid to not displayed.

<style>
@media screen and (max-width: 980px){
.list { display: none; }
} 
@media screen and (min-width: 981px){
.grid{ display: none; }
}
</style>