Tablas CSS, para Invertir del contenido que se muestra

Question

sé que esto es una punta de lanza poco, pero aquí está la pregunta de todos modos:

Dado

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

...

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

.. .que me da una disposición encantadora de lado a lado del div con #one a la izquierda y #two a la derecha.

¿Hay alguna forma de poner #two a la izquierda y #one a la derecha, usando display: table-cell;, y sin cambiar el orden de los divs en el HTML?

Lo pregunto, porque me gustaría mantener #algo arriba #two en HTML por motivos de SEO, pero me gustaría que #two esté a la derecha de #one por motivos estéticos. Sé cómo hacer esto usando flotantes/posicionamiento absoluto/márgenes/etc., pero me preguntaba si había alguna manera de hacerlo usando las nuevas propiedades de visualización de tablas CSS (que prefiero).

¿Alguna idea?

Answer 1

Usted puede (ab) usar el texto dirección advertencia, el mal por delante:

<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> 

utilizo FlexBox. También puedes cambiar el recuento de divs. Por ejemplo, ponga más divs con la clase de la izquierda, luego se colocarán del lado izquierdo, incluso si se declaran después.

Probé el ejemplo de @Greg, pero no funciona en IE.