Javascript 在引导中使元素在列外流动

我想在名片上做一个谷歌评论部分，里面有一个谷歌标志图标、一个文本元素（谷歌评论）和一个很棒的五星字体。我希望所有这些都垂直对齐。但自从我上了二级课程后，所有这些都将进入下一行。我将附加所需的输出图像

.row{
高度：400px；
背景颜色：灰色；
}
.col-2{
背景颜色：黄色；
}
/*谷歌评论*/
.谷歌评论{
变换：旋转（90度）；
变换原点：左上角；
排名：0；
背景色：#88206d；
溢出：可见；
}
.g-标志img{
变换：旋转（-90度）；
宽度：38px；
背景色：#fff；
填充物：5px；
边界半径：22px；
盒影：2PX2PX6PX0PXRGBA（0,0,0,0.53）；
-webkit盒阴影：2px2px6px0pxRGBA（0,0,0,0.53）；
-moz盒阴影：2px2px6px0pxrgba（0,0,0,0.53）；
}
.明星{
背景：-webkit线性梯度（#FF3D00，#FFCE31）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

谷歌评论

根据您所需的输出，以下是实现此目的的代码

您可以在不编写自定义CSS的情况下完成大部分工作，因为bootstrap覆盖了大多数CSS类，从而简化了我们的工作

如果我理解错误，请在评论中告诉我

span.vertical-txt{
写入方式：垂直rl；
文本取向：混合型；
}

谷歌评论

只需将

googlereview

div的

宽度设置为
400px
。以下是工作片段：


.row{
高度：400px；
背景颜色：灰色；
}
.col-2{
背景颜色：黄色；
}
/*谷歌评论*/
.谷歌评论{
变换：旋转（90度）；
变换原点：左上角；
背景色：#88206d；
溢出：可见；
宽度：400px；
}
.g-标志img{
变换：旋转（-90度）；
宽度：38px；
背景色：#fff；
填充物：5px；
边界半径：22px；
盒影：2PX2PX6PX0PXRGBA（0,0,0,0.53）；
-webkit盒阴影：2px2px6px0pxRGBA（0,0,0,0.53）；
-moz盒阴影：2px2px6px0pxrgba（0,0,0,0.53）；
}
.明星{
背景：-webkit线性梯度（#FF3D00，#FFCE31）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

谷歌评论