CODEWITHSUNDEEP
javascriptjqueryhtmlcssyui-pure-css
Howard
Howard

Reputation: 3758

Change div order on smaller width screens in YUI Pure CSS

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

trying to do something like this

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?

Upvotes: 0

Views: 85

Answers (1)

Sensoray
Sensoray

Reputation: 2420

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.

Upvotes: 0

Related Questions