html - Pure CSS を使用して表のセルを交換する方法

Question

純粋な CSS を使用してテーブル セルの位置を交換する方法を知っている人がいるかどうかを調べていました。以下のような3つのdivがあります

#content {
  width: 1000px;
  display: table;
  float: none;
  vertical-align: top;
  border: 1px solid red;
}
#left {
  float: left;
}
#right {
  float: right;
}
#left, #right {
  width: 200px;
  display: table-cell;
  right: 600px;
  border: 1px solid grey;
}
#middle {
  width: 600px;
  display: table-cell;
  float: left;
  border: 1px solid grey;
  margin-left: 200px
}

<div id="content">
  <div id="left">some text and divs inside</div>
  <div id="right">some text and divs inside</div>
  <div id="middle">SOme more text and divs inside</div>
</div>

ページの読み込み中に、中央部分がちらつきます。そのため、純粋な CSS を使用して左右の位置を交換するための大きな助けを探しています。

Answer 1

以下のコードは私のために働いた。コードの概念は、コメントで David と話した後、Facebook から取得しました。彼のおかげで..

<div id="content">
      <div id="left">some text and divs inside</div>
      <div id="rightPart">
        <div id="right">some text and divs inside</div>
        <div id="middle">SOme more text and divs inside</div>
      </div>
    </div>


<style>
    #content{
          width: 1005px;
          display: table;
          float: none;
          vertical-align: top;
          border: 1px solid red;
        }
        #left{
          float:none;
        }
        #right{
          float:right;
        }
        #rightPart{
          float: none;
          vertical-align: top;
        }
        #left, #right{
          width: 200px;
          display: table-cell;
          border: 1px solid grey;
          vertical-align: top;
        }
        #middle{
          width: 600px;
          display: table-cell;
          float: none;
          border: 1px solid grey;
        }
        </style>