Mobile only grid with Foundation for Emails (Zurb)

Question

I'm trying to hide a column or row when it's viewed on desktop and only show on mobile or vice-versa.

Anyone know if this is possible? I was trying to implement the following classes but it doesn't seem to work on the tags.

.mobile-only {display:none;}
.desktop-only {display:block;}

@media only screen and (max-width: 596px) {

.mobile-only {display:block;}
.desktop-only {display:none;}

}

It would be great if there was a built in class like small-0 or large-0 that had this purpose.

Answer 1

there are built in classes for visibility.

from Foundation for Email docs. http://foundation.zurb.com/emails/docs/visibility.html

To show content only on mobile clients, add the class .hide-for-large to the element.
To show content only on desktop clients, add the class .show-for-large to the element.

note - .hide-for-large is not supported on Gmail and Yahoo email clients.

Answer 2

To override inline styling you have to use !important.

@media only screen and (max-width: 596px) {
  .mobile-only {display: block !important;}
  .desktop-only {display: none !important;}
}

If this solution isn't supported in all the clients you are targeting, try:

.example {
  width: 0px; 
  height: 0px; 
  color: transparent; 
  line-height: 0; 
  overflow: hidden; 
  font-size: 0px; 
  display: none !important; 
  visibility: hidden; 
  opacity: 0; 
  mso-hide: all;
}