CSS Tabellen, Invert Reihenfolge der angezeigten Inhalte

Question

Ich weiß, dass dies ein wenig bleeding edge ist, aber hier ist die Frage trotzdem:

Gegeben

<div id="one">First Div</div> 
<div id="two">Second Div</div> 

...

#one, #two { display: table-cell; } 

.. Das gibt mir eine schöne Seite-an-Seite-Anordnung der Divs mit #one auf der linken Seite und #two auf der rechten Seite.

Gibt es trotzdem #two auf der linken Seite und #one auf der rechten Seite, mit display: table-cell;, und ohne die Reihenfolge der divs im HTML zu ändern?

Ich frage, weil ich #one #two im HTML aus SEO Gründen behalten möchte, aber ich möchte #two aus ästhetischen Gründen rechts von #one sein. Ich weiß, wie man dies mit floats/absolute positioning/margins/etc tun kann, aber ich frage mich, ob es einen Weg gibt, wie ich es mit den neueren CSS-Tabellenanzeigeeigenschaften machen kann (was ich sehr bevorzuge).

Irgendwelche Gedanken?

Answer 1

Sie können (ab) verwenden, um die Textrichtung Warnung, Übel voraus:

<div id="container"> 
    <div id="one">First Div</div> 
    <div id="two">Second Div</div> 
</div> 

<style> 
    #container { direction: rtl; } 
    #one, #two { display: table-cell; direction: ltr;} 
</style> 

Answer 2

<div class="container"> 
     <div class="middle" style="background-color: blue;"> 
      <h4>Left Col placed middle</h4> 
      <p>...</p> 
     </div> 
     <div class="right" style="background-color: red;">   
      <h4>Middle Col placed right side</h4> 
      <p>...</p> 
     </div> 
     <div class="left" style="background-color: yellow;"> 
      <h4>Right Col placed left side</h4> 
      <p>...</p> 
     </div> 
    </div> 

<style type="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 Flexbox verwenden. Sie können auch die Anzahl der Divs ändern. Setzen Sie zum Beispiel mehr divs mit der linken Klasse, dann werden sie links platziert, auch wenn sie danach deklariert sind.

Ich versuchte @Greg Beispiel, aber es funktioniert nicht auf IE.