Html 引导式等高表单标签，具有响应性堆叠

我的问题与这个问题非常相似：

基本上，就像前面的问题一样，我在几个列中有几个表单元素（标签/输入对）。我的标签被翻译，有时占1行，有时占3行。最后，我希望这些标签具有相同的高度，以便输入字段都位于同一水平线上

问题中的一个答案建议将标签拆分为自己的行，并将输入拆分为自己的行。问题是，当以移动屏幕大小查看时，这些项目会堆叠起来，看起来像：

label1
label2
label3
input1
input2
input3

这个答案暗示了任意的高度：

然而，我认为如果我的标签占据更多的高度线，这是行不通的

我唯一能想到的另一件事是利用JavaScript计算最大高度，然后应用该高度。然而，我希望有某种CSS/FlexBox/Bootstrap解决方案，在我朝这个方向前进之前，我还没有看到

编辑：

我也在寻找这些元素的堆栈时，他们在移动的大小。例如：

label1
input1

label2
input2

---

+mobile

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
身体{
利润率：10px；
}
.row.flex{
显示器：flex；
对齐项目：柔性端；
}
@介质（最大宽度：767px）{
.row.flex.col-xs-6{
宽度：100%；
}
标签{
边缘顶部：5px；
}
.row.flex{
柔性流动：包裹；
}
}

输入的超大长标签输入的超大长标签
和左边一样高

显示具体的代码。这是原始问题中的JSFIDLE：我的情况与此完全相同，只是它必须适用于响应性/移动尺寸。这个答案看起来很好。尽管如此，我还是希望在移动大小下，表单元素组可以堆叠在一起。“我应该在原来的问题中把它说出来。”斯科特·迪特里希（Scott Dietrich）见整版，调整窗口大小。