Javascript 在YUI纯CSS中更改较小宽度屏幕上的div顺序

下面是我在YUI纯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>

B
D
F

---

有没有一种方法可以只用YUI纯CSS来实现这一点，或者我需要使用JQuery/Javascript？

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

这会改变单个div中的顺序，但请注意，我将2个列div混合到1中。