可堆叠媒体对象在Foundation中无法正常运行

Question

我有这样的结构：

<div class="grid-container fluid">
    <div class="grid-x grid-margin-x fluid" id="content">
        <div class="cell medium-offset-1 medium-7 small-12>
            <div class="content-section">
                <div class="media-object stack-for-small">
                    <div class="media-object-section"> # object1
                        <div class="thumbnail">
                            <img src="">
                        </div>
                   </div>
                   <div class="media-object-section"> # object 2
                   [....]      
                   </div>
                </div>
            </div>
        </div>

        <div class="cell medium-3 columns small-12">
        Upcoming events...
        </div>
    </div>
</div>

对于大屏幕和小屏幕，它都按预期工作：可堆叠的项目堆叠在小屏幕中，一个大屏幕则彼此相邻。问题是发生在中等大小的显示器上（这是iPad）：

我能忽略一些明显的东西吗？

Answer 1

已通过GitHub解决。

Answer 2

默认情况下，我们使用$-zf-zero-breakpoint（即small）并在那里编译CSS。这仅适用于较小的断点，而不是中等或其他断点。