Swap elements using CSS?

Question

I have fairly simple layout, like this:

    1
    2

Answer 1

I'm pretty sure this will work:

.card {
    width: 100px;
    height: 150px;
    float: left;
}

.attack, .defence {
    width: 100px;
    height: 75px;
    clear: right;
}

/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
    float: left;
}
.attack-top .card .defence {
    float: right;
    height: Wpx;
    padding-top: Xpx;
}


/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
    float: right;
    height: Ypx;
    padding-top: Zpx;
}
.defence-top .card .defence {
    float: left;
}

There are a few details missing in your description, so I'll try to fill in my assumptions, and you can let me know if they're valid or not.

• You said "when a card is in specific areas". I'll assume these areas can be represented by different containing classes (.attack-top and .defence-top, but rename as you see fit).
• I'm assuming that a .card is 100px wide and 150px tall. If these width and height values are wrong, fill in the correct ones and make the appropriate recalculations. If .card doesn't have fixed width/height, it may still work, but I'm less confident, and you won't be able to get the bottom text to go to the very bottom of the card (just below the top text).