javascript - 在 YUI Pure CSS 中更改较小宽度屏幕上的 div 顺序

Question

这是我在较小宽度的屏幕上尝试在 YUI Pure CSS 中执行的操作的图片:

我的 HTML 非常简单:

<div class="pure-g">
    <div class="pure-u-1 pure-u-sm-1-2">

        <div class="pure-g">
            <div class="pure-u-1>
                A
            </div>
        </div>

        <div class="pure-g">
            <div class="pure-u-1>
                B
            </div>
        </div>

        <div class="pure-g">
            <div class="pure-u-1>
                C
            </div>
        </div>

    </div>
    <div class="pure-u-1 pure-u-sm-1-2">

        <div class="pure-g">
            <div class="pure-u-1>
                D
            </div>
        </div>

        <div class="pure-g">
            <div class="pure-u-1>
                E
            </div>
        </div>

        <div class="pure-g">
            <div class="pure-u-1>
                F
            </div>
        </div>

    </div>
</div>

有没有一种方法可以只使用 YUI Pure CSS 来做到这一点，还是我需要使用 JQuery/Javascript？

Answer 1

当然，在更大的屏幕宽度下，让 A、B 和 C 向左浮动，让 D、E 和 F 向右浮动。但必须将它们从“pure-u-1 pure-u-sm-1-2”div 中删除。