Display Table Cell Order Change CSS

Question

I am building a web page layout using blocks set to display: table-cell. Everything is working fine, but I cannot flip the cells (change their order) in a row and wondering if there is such possibility or some trick what I can use to achieve this.

I need to achieve this using only CSS and display: table-cell :)

Thanks in advance for any suggestions.

HTML

<div class="dtc">
    <div>Item1</div>
    <div>Item2</div>
</div>

CSS

.dtc{
    display: table;
    width: 100%;
}
.dtc > *{
    display: table-cell;
}

Current table:

+-------+-------+
| Item1 | Item2 |
+-------+-------+

Desired result:

+-------+-------+
| Item2 | Item1 |
+-------+-------+

Have a look here: http://stackoverflow.com/questions/220273/use-css-to-reorder-divs - you can do so with flexbox / order css3 property — eithed, Jun 19 '16 at 19:51

score 22 · Accepted Answer · answered Jun 19 '16 at 19:53

22

use RTL for parent and LTR for children. This will flip the order .

.dtc { direction: rtl; }
.dtc > div { direction: ltr; }

Without LTR for children text will not be properly aligned.

answered Jun 19 '16 at 19:53

Ilya Novojilov

871
8
12

Hahaha this is perfect!!!! I tried to use direction but only for children so it did not work! Great tip! Thanks a million! :) – egurb Jun 19 '16 at 19:56
Ohhw look at that! – John Miller Apr 01 '20 at 17:59

Display Table Cell Order Change CSS

1 Answers1