Css 以不同的列大小旋转引导中的文本

我有很多不同的列大小，所以当我在其中放置跟随代码时，每个列中的旋转文本都是不同的

CSS:

.verticaltext {
    position: relative;
}

.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: -60px;
    top: 35px;
    position: absolute;
    color: #FFF;
    text-transform: uppercase;
}

我希望每一个颜色都是这样：

---

您的代码非常实用。当然，您还没有包含任何HTML或引导程序，因此很难理解您到底在哪里遇到了问题。这就是说，这里有一个小CSS的布局类似于您的图像

我已经在文本左侧添加了一个填充和一个最小高度，这样左侧的文本就不会重叠。显然，两者都可能需要调整以满足您的需要

正文{
背景：#000；
颜色：#fff；
字体系列：Arial，无衬线；
}
.垂直文本{
位置：相对位置；
左侧填充：50px；
利润率：1米0；
最小高度：120px；
}
.verticaltext_内容{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-ms变换：旋转（-90度）；
-o变换：旋转（-90度）；
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；
左：-40px；
顶部：35px；
位置：绝对位置；
颜色：#FFF；
文本转换：大写；
字号：26px；
字体大小：粗体；
}

---

通过演示。

使用引导扩展解决问题的最简单方法

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

一些文本

---

更多详细信息：

也许使用transform origin会有所帮助？请创建JSFIDLE或上传更多代码