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?

https://stackoverflow.com/questions/31010684/specify-collapse-order-of-purecss-grid — mdev, Jun 06 '17 at 20:24
That changes the order within a single div but notice I'm mixing 2 column divs into 1. — Howard, Jun 06 '17 at 20:27

score 0 · Answer 1 · answered Jun 06 '17 at 20:27

0

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.

answered Jun 06 '17 at 20:27

Sensoray

2,360
2
18
27

Change div order on smaller width screens in YUI Pure CSS

1 Answers1