在语义可堆叠网格中重新排序列

Question

我目前正在使用Sementic-UI框架响应功能,并且在使用可堆叠网格时我遇到了障碍.具体来说,我试图复制一个经典的首页布局,其中大段落和图片布局在三分之一和三分之二列中,左右交替.

<div class="ui stackable grid">
    <div class="sixteen wide column">
        <h2>Full width header</h2>
    </div>
    <div class="six wide column">
        <img alt="Left image" />
    </div>
    <div class="ten wide column">
        <p>Right content</p>
    </div>
</div>

<div class="ui stackable grid">
    <div class="sixteen wide column">
        <h2>Full width header</h2>
    </div>
    <div class="ten wide column">
        <p>Left content</p>
    </div>
    <div class="six wide column">
        <img alt="Right image" />
    </div>
</div>

我为所有部分重复这种模式,每次都交换两个并排的列.问题是,当网格堆叠时,我想将图像保留在内容之上.它适用于第一种情况,因为列已经是正确的顺序,但显然第二个块失败,因为图像放在内容之后.

我想知道是否有一种简单的方法可以实现这一点,还是只能使用javascript完成？我应该继续使用网格还是应该使用其他东西？如果我需要使用javascript,那么检测网格布局变化的最佳方法是什么？

这是我第一次做响应式设计,所以欢迎参考这个主题.

Answer 1

使用网格元素的反向变化可以实现这一点。对于第二个网格，我建议如下：

<div class="ui stackable grid">
    <div class="row">
        <div class="sixteen wide column">
            <h2>Full width header</h2>
        </div>
    </div>
    <div class="computer reversed row">
        <div class="six wide column">
            <img alt="Right image" />
        </div>
        <div class="ten wide column">
            <p>Left content</p>
        </div>
    </div>
</div>

默认情况下将图像放在第一位，并且仅在计算机屏幕尺寸上反转，可以最大限度地降低图像位于末尾且列堆叠的风险。它留下了屏幕尺寸的可能性，其中图像在列堆叠之前出现在左侧，但这应该不是一个严重的问题。