Si encuentras alguna parte que no comprendes puedes dejarlo en los comentarios y trataremos de ayudarte lo mas rápido que podamos.
Su código es bastante funcional. Por supuesto, no ha incluido ningún HTML o Bootstrap, por lo que es un poco difícil descifrar exactamente dónde está teniendo problemas. Dicho esto, aquí tienes un pequeño CSS con un diseño similar al de tu imagen.
Básicamente, he agregado un relleno a la izquierda del texto y una altura mínima para que el texto de la izquierda no se superponga. Obviamente, ambos pueden tener que ser ajustados para satisfacer sus necesidades.
body
background: #000;
color: #fff;
font-family: Arial, sans-serif;
.verticaltext
position: relative;
padding-left: 50px;
margin: 1em 0;
min-height: 120px;
.verticaltext_content
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
left: -40px;
top: 35px;
position: absolute;
color: #FFF;
text-transform: uppercase;
font-size: 26px;
font-weight: bold;
Aquí hay un violín con una demostración.
La forma más fácil de resolver con Bootstrap Extension.
Some text
Más detalles: http://bootstrap-extension.com/#content-rotate
Calificaciones y reseñas
Si haces scroll puedes encontrar las críticas de otros administradores, tú asimismo puedes mostrar el tuyo si te apetece.