How to change CSS based on mobile device?

Question

In the following example, I want to display only one div, depending on the device.

I\'m familiar with how to use @media to override a CSS cla

Answer 1

Here's an example of how it can be done conditionally without javascript:

//CSS
.visibledevice {display:none;}
.visibledesktop {display:display;}

@media (max-width : 320px) {
    .visibledevice {display:block;}
    .visibledesktop {display:none;}
}

//in the page
this displays for desktop and tablet

this displays for mobile