无法在Bootstrap 4网格中对齐旋转的文本

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- 左侧内容 -->
    </div>
    <div class="col-md-6">
      <!-- 右侧内容 -->
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="text-container">
    <p class="rotate-text">旋转的文本</p>
  </div>
</div>

.text-container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.rotate-text {
  transform: rotate(-90deg);
  transform-origin: top left;
  white-space: nowrap;
}