html字母间距属性,正确位置旋转文本（以字母间距/ HTML5/CSS）

我已阅读并尝试了最大约＃2这个话题给出的答案，但没有人可以为我工作(转动是的，它的位置不正确)。我的问题：正确位置旋转文本(以字母间距/ HTML5/CSS)

旋转文本-90度

位置-90度文本正确如下(最终结果)的图片。

代码应工作的响应式设计(％)

我加入了完整的代码中的jsfiddle(包括我的头的内容同上)。我添加了灰色标题，以澄清在图像/标题/文本开始前存在以上内容：Link to JSFiddle code

您如何(1)旋转文本，更重要的是(2)如何定位旋转文本类似于最终结果：

HTML代码(见的jsfiddle)：

ABOUT

Viris tibique scaevola mea ut, soluta forensibus suscipiantur et usu, his at munere fabellas. Cu harum quaestio cum, mei an quodsi evertitur adipiscing. Discere inermis dissentias ne mel. At eos possit elaboraret, sea ea vitae lobortis.

Id doming consulatu usu. Suas quot mei ut, ne habeo liberavisse his. Nec aeterno nostrud disputando ad, per in facete alienum. Cu his debitis inimicus facilisis.

In audiam tractatos per. Eu est zril reprehendunt. Probo appetere consetetur eam an. Augue ignota sit ex. Ex sanctus nominavi vix, nam ne mandamus intellegat. Vivendum principes eam no, qui ei pericula abhorreant. Mundi mediocrem scribentur duo ne, graeco theophrastus id his.

预先感谢。

2016-04-30

WPasman