when I was questioning on Stackoverflow how to solve my problem with mjml.io and after some research I found that there is also ZURB Foundation emails which should work perfectly on Outlook 2003 (as mentioned on their website).
So I tried to create the same behaviour as I was doing on this MJML.io Tryout page.
My problem is:
I only see show-for-large and hide-for large in the CSS.But I can't see anything which will show-for-small and hide-for-small....
<container class="show-for-large"><row><columns ><img src="http://c64os.com/resources/c64c-system.jpg"></columns></row></container><container class="hide-for-large"><row><columns><img src="https://www.ecom-ex.com/fileadmin/user_upload/images/products/one-pager/gallery/ex-handy_10_dz1dz2/ex-handy_10_dz1_teaser_1.png"></columns></row></container>It works for Desktop, but for mobile it shows both :-(
Best Answer
There is only one breakpoint $global-breakpoint ($global-width + $global-gutter) in Foundation Emails (see https://github.com/foundation/foundation-emails/blob/2474651b1de029aea9f5830e95842753bf0242e3/scss/settings/_settings.scss#L40).
show-for-large is the same as hide-for-small andhide-for-large is the same as show-for-small (regarding the logic).
If you need more classes you would have to add / create your own helper classes if you need these classes as we provide only the one which use $global-breakpoint.
See https://github.com/foundation/foundation-emails/blob/develop/scss/components/_visibility.scss