Мобильная сетка с основанием для электронных писем (Zurb)

Question

Я пытаюсь скрыть столбец или строку, когда она просматривается на рабочем столе и отображается только на мобильном телефоне или наоборот.

Кто-нибудь знает, возможно ли это? Я пытался реализовать следующие классы, но, похоже, он не работает над тегами.

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

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

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

} 

Было бы замечательно, если бы там было построено в классе, как малые 0 или большого-0, который имел эту цель.

Answer 1

Есть встроенные классы для видимости.

от Фонда для электронных документов. http://foundation.zurb.com/emails/docs/visibility.html

Чтобы показать контент только на мобильных телефонах, добавьте класс .hide-for-large к элементу.
Чтобы показать содержимое только на настольных компьютерах, добавьте класс .show-for-large к элементу.

примечание - .hide-for-large не поддерживается почтовыми клиентами Gmail и Yahoo.

Answer 2

Чтобы переопределить встроенный стиль, вы должны использовать !important.

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

Если это решение не поддерживается во всех клиентов вы ориентируетесь, попробуйте:

.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; 
}