在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向右浮动，屏幕宽度更大。但是它们必须从纯净的u-1-pure-u-sm-1-2＆＃34;中脱离出来。的div。