Change div order on smaller width screens in YUI Pure CSS

Question

Here's an image of what I'm trying to do in YUI Pure CSS on a smaller width screen:

My HTML is pretty straight forward:

<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>

Is there a way to do this with just YUI Pure CSS or would I need to use JQuery/Javascript?

Answer 1

Sure, make A, B, and C float left and D, E, and F float right at a larger screen width. But they would have to be taken out of the "pure-u-1 pure-u-sm-1-2" divs.