Showing lines in reverse order on the screen

Question

Say I have an unknown number of lines with text. For example:

<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>

I want to show them in reverse, so:

Line 3
Line 2
Line 1

I can not use javascript, only CSS. Is this possible?

Note: I have potentially an unlimited number of lines (this is an internal feed and new lines are added on the fly), and am looking for a simple solution that does not involve creating unique CSS for each of the lines (so the solution suggested here does not work: Switching the order of block elements with CSS).

This is an internal system and does not require a lot of compatibility. Recent Chrome/Firefox browsers will do.

possible duplicate of [Switching the order of block elements with CSS](http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css) — Ivan Gerasimenko, Mar 19 '15 at 09:23

score 1 · Answer 1 · answered Mar 19 '15 at 09:35

This comes to my mind:

<div class="upside-down">
    <p class="upside-down">Line 1</p>
    <p class="upside-down">Line 2</p>
    <p class="upside-down">Line 3</p>
    ...
    <p class="upside-down">Line N</p>
</div>

CSS:

.upside-down {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

Showing lines in reverse order on the screen

1 Answers1