Moving A Div From Bottom To Top, Using Only Css

I have something like this: http://jsfiddle.net/my5La/

Solution 1:

You can reorder elements using order property of flexbox layout:

/* flexbox on body or any other wrapper */body {
    display: flex;
    flex-direction: column;
}

#first,
#third {
    order: -1;
}

Demo: http://jsfiddle.net/my5La/2/

But as well as others, I advice you to obey Google AdSense ToS.

Solution 2:

Doing this with CSS is difficult to impossible without fixed height divs.

You can use jQuery's insertBefore or insertAfter:

$("#third").insertBefore($("#second"));

jsFiddle

EDIT

Reordering ads is a violation of Google's AdSense Policy

Solution 3:

since they're all the same shape and size, you could just change there color giving the illusion that a div's position has changed. Seems a lot easier to do that than moving actual HTML elements around.

Share