Css Tables, Invert Order Of Displayed Content

I know this is a bit bleeding edge, but here's the question anyway: Given

First Div

Second Div

... #one, #two { dis

Solution 1:

You can (ab)use the text direction warning, evil ahead:

<divid="container"><divid="one">First Div</div><divid="two">Second Div</div></div><style>#container { direction: rtl; }
    #one, #two { display: table-cell; direction: ltr;}
</style>

Solution 2:

<divclass="container"><divclass="middle"style="background-color: blue;"><h4>Left Col placed middle</h4><p>...</p></div><divclass="right"style="background-color: red;"><h4>Middle Col placed right side</h4><p>...</p></div><divclass="left"style="background-color: yellow;"><h4>Right Col placed left side</h4><p>...</p></div></div><styletype="text/css">.container {
        display: flex;
    }
    .container > .left{
        order:1;
    }
    .container > .middle{           
        order:2;
    }
    .container > .right{
        order:3;
    }

    .left, .middle, .right {
        display:table-cell;         
    }
 </style>

I use flexbox. You can also change count of divs. For example put more divs with left class, then they will be placed left side even if they are declared after.

I tried @Greg example, but it doesn't work on IE.