在 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 中取出。