Question

I have fairly simple layout, like this:

<div class="card">
    <span class="attack">1</div>
    <span class="defence">2</div>
</div>

They’re arranged on top of each other with simple display: block. What I want to achieve is when a card is in specific areas, “attack” shows on bottom and “defence” is on top. I know I can make it with jQuery, but can I achieve the same effect using pure CSS?

Answer 1

Technically, this is a business rules thing, which is not the domain of your cosmetic layer.

In an HTML document, the order of elements from first to last has semantic meaning – your case is not different, I suspect, in that you are trying to indicate some difference in importance from one element to the next (in the document, not just the visual representation) depending on the context.

So your approach should be JQuery, or some other method of changing the meaning of the relationship of these two elements in terms of their order in the document. CSS is intended to change only their cosmetic appearance.

With situations like this, it can be helpful to think, “what if someone could not see the elements, and had to rely on a screen reader to read them in the order they appear in the document? Would this information (not just the content of the two elements, but their relationship) still be correct and comprehensible?”

You may not intend for this to be accessible to the blind, but that’s often a good sanity check for how to approach a problem like this.