html - 2番目の要素を1番目に表示（CSS）

Question

私のコードは次のとおりです。

<div class="item">
<div class="img">Hello this is img</div>
<div class="text">Hello this is text</div>
</div>

として表示させたい

こんにちは、これはテキストです
こんにちは、img です

コードを並べ替えずにこれを実現したい。できればcssで。何か案は？

Answer 1

   .item .text{float:left;display:inline;}
   .item .img{display:inline}

css3transformで垂直方向の配置を試してください

     .item .text{-webkit-transform:translateY(-100%);transform:translateY(-100%);}
      .item .img{-webkit-transform:translateY(100%);transform:translateY(100%);}

フィドル - http://jsfiddle.net/6B7qt/4/