Rotate Text in Bootstrap in different col sizes

Your code is pretty much functional. Of course, you have not included any HTML, or Bootstrap for that matter, so it's a little hard to decipher where exactly you are having trouble. That said, here's a little CSS with a layout similar to that of your image.

I've essentially added a padding to the left of the text and a minimum height so the text on the left won't overlap. Obviously, both may have to be adjusted to fit you needs.

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

Here is a Fiddle with a demonstration.

The easiest way to solve with Bootstrap Extension.

<div class="container o-hidden">
    <div class="row">
        <div class="col-12 col-sm-6 col-sm-push-4 rotate-sm-l-90">
            <p class="display-6">Some text</p>
            <hr class="bg-dark">
        </div>
        <div class="col-12 col-sm-6">
            <img class="w-100 mt-5" src="sample1.jpg" alt="sample1">
        </div>
    </div>
</div>

More details: http://bootstrap-extension.com/#content-rotate