Question

我在基础5（*-push-*和*-pull-*）中缺少关于源排序类的使用的一些内容。我创建了一个JSfiddle来说明我的理解与世界之间的差距，因为它是here

案例非常简单：我有一行有两列。在大型视口上，我希望它们并排放置，每个宽度为6列。在小视口上，我希望它们堆叠，每个宽度为12列，第二列现在位于第一列之上。

[ A ][ B ] --resize--> [ B ]
                       [ A ]

我得到的是

[ A ][ B ] --resize--> ____[ A ]
                       [ B ]____

这里是代码

<body>
    <div class="row ">
        <div class="large-6 small-12 small-push-6 columns large-reset-order">
            <p>A:  On large screens, I should be the first element in the row, taking up half the grid, i.e. 6 columns</p>
            <p>Then again, on small screens I should be the second element.</p>
        </div>
        <div class="large-6 small-12 small-pull-6 columns large-reset-order">
            <p>B:  On large screens, I should be the second element in the row, i.e. 6 columns</p>
            <p>Of course, on small screens, I should show up first!</p>
        </div>
    </div>
</body>

我看到this question，但我不认为它能回答我的问题。首先，我没有使用push-12，因此定义了一个类。其次，在我的困惑中，我正在做的事情看起来很像Foundation docs的源序列部分中的最后一个例子

Answer 1

<body>
    <div class="row ">
        <div class="large-6 small-12 large-push-6 columns ">
            <p>A:  On large screens, I should be the first element in the row, taking up half the grid, i.e. 6 columns</p>
            <p>Then again, on small screens I should be the second element.</p>
        </div>
        <div class="large-6 small-12 large-pull-6 columns ">
            <p>B:  On large screens, I should be the second element in the row, i.e. 6 columns</p>
            <p>Of course, on small screens, I should show up first!</p>
        </div>
    </div>
</body>

试试这个..

应该是large-pull和large-push。

Zurb Foundation源码排序类的简单例子（带小提琴）

1 个答案: