Swap elements using CSS?

Question

I have fairly simple layout, like this:

    1
    2

Answer 1

You can do this by using (if you only want to do the swap in div.card):

.card .attack {
   position: relative;
   top: 1em;
}
.card .defence {
   position: relative;
   top: -1em;
}

But as others have mentioned this can have some unintended side-effects. E.g. the above sample will move swap position correctly only for 1 line blocks.