I have created a web page layout using blocks set to display: table-cell. Everything is functioning correctly, but I am struggling to rearrange the cells within a row and I am curious if there is a way to achieve this or maybe an interesting trick that could help me accomplish it.
I want to make these changes exclusively through CSS and the use of display: table-cell :)
Thank you in advance for any guidance.
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 |
+-------+-------+