Таблицы CSS, инвертированный порядок отображения содержимого

Я знаю, что это немного кровоточащий край, но вот вопрос в любом случае:

Учитывая

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

...

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

..., который дает мне прекрасную бок о бок расположение div С#one слева и # два раза справа.

Есть ли способ разместить #two слева и #one справа, используя display: table-cell;, и без изменения порядка div в HTML?

Я спрашиваю, потому что я бы хотел # # превышать # 2 в HTML по причинам SEO, но я бы хотел, чтобы # 2 был справа от #one по эстетическим соображениям. Я знаю, как это сделать, используя float/absolute positioning/margins/etc., Но мне было интересно, есть ли способ, которым я могу это сделать, используя новые свойства отображения таблицы CSS (что я предпочитаю).

Любые мысли?

Ответы

Ответ 1

Вы можете (ab) использовать текстовое направление предупреждение, зло впереди:

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

Ответ 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>

Я использую flexbox. Вы также можете изменить количество div. Например, добавьте больше div с левым классом, тогда они будут размещены в левой части, даже если они объявлены после.

Я попробовал пример @Greg, но он не работает на IE.