如何在Zurb Foundation基于html的网格类中定位不同的方向？

Question

This question only concerns prototyping; I know it can be done with semantic grid classes via (S)CSS, but I'm referring to Zurb Foundation's unsemantic html-based grid classes.

I'm trying to do something like this – why won't it seem to work?

<div class="medium-portrait-4 medium-landscape-7">...</div>
<div class="medium-portrait-8 medium-landscape-5">...</div>

Answer 1

As of Zurb Foundation v5.3.0 There is no out of package class for targeting orientations directly such as you describe above.

However by employing mixins one can create a custom class that provides the desired outcome such as the following example I copied from the a similar question on the foundation site .

.class-name { 
  @media #{$small-only} and (orientation: portrait) { 
    @include grid-column(2);
  }
  @media #{$small-only} and (orientation: landscape) { 
    @include grid-column(4);
  }
 @media #{$medium-up} and (orientation: landscape) { 
    @include grid-column(6);
  } 
}

Answer 2

To make this, i change the breakpoints in _settings.scss:

small: 0,
medium: 750px,
large: 970px,
xlarge: 1170px,
xxlarge: 1440px,

when i use small col for mobile, medium col for tablet portrait, large col for tablet landscape

its make the job