Vertical reordering of blocks with CSS or How to swap two elements using CSS

It’s old trick for search engine optimization (SEO). As far as we all know, search engine parses web page and prioritizes key words founded on the page. And words that are in the beginning of the page have more priority, it’s obviously because usually in the beginning of the page is header that should describe content below.

So the obvious search engine optimization is to arrange all key words in the beginning of the page.┬áBut it is completely not cool for Design. That’s why we need to replace two blocks: block with key words should be in the beginning of the markup, but on UI it should be under the next block with page’s content.

So we got something like this

<div class="block">It is content needed for SEO, but it's not very interesting for user</div>
<div class="block">Really good and interesting for user content, but it's waste for search engines</div>

and we need to swap these two blocks on UI.

First of all we need additional wrappers, so lets modify markup to something like this:

<div class="wrapper">
    <div class="bottom">
        <div class="block">It is content needed for SEO, but it's not very interesting for user</div>
    </div>
    <div class="top">
        <div class="block">Really good and interesting for user content, but it's waste for search engines</div>
    </div>
</div>

And here is the magic:

.wrapper {
    display: table; 
    width: 100%; 
}
.top {
    display: table-header-group; 
}
.bottom {
    display: table-footer-group;
}
/* next style is not really necessary, just to show borders of swapped blocks */
.block {
    border: 1px solid black;
}

Here is the proof link http://jsfiddle.net/UJWP4/1/

Some words about browsers support – this approach works fine in IE8+ (not supported in ie7)

Social Share Toolbar