显示表单元格顺序更改CSS

Question

我正在使用设置为显示的块来构建网页布局:table-cell.一切都工作正常,但我不能连续翻转单元格(改变他们的顺序)并想知道是否有这样的可能性或一些技巧我可以用来实现这一点.

我需要使用CSS和display来实现这一点:table-cell :)

在此先感谢您的任何建议.

HTML

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

CSS

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

当前表格:

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

期望的结果:

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

Answer 1

将RTL用于父级,将LTR用于子级.这将颠倒顺序.

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

没有儿童LTR文本将无法正确对齐.