Swap elements using CSS?

Question

I have fairly simple layout, like this:

    1
    2

Answer 1

The first thought is to use absolute positioning within .card.

.card      { width:100px; height:50px; position:relative; }
  .attack  { width:100px; height:25px; position:absolute; top:25px; }
  .defense { width:100px; height:25px; position:absolute; top:0; }

In this example, .attack will be (visually) below .defense. But note, if you disable CSS, the true arrangement will be seen.