具有响应式堆叠的 Bootstrap 等高表单标签

Question

我的问题与这个问题非常相似： All labels with same height, on each row

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

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

label1
label2
label3
input1
input2
input3

这个答案建议和任意高度：https://stackoverflow.com/a/36409948/811277

但是，如果我的标签占用更多的高度线，我认为它不会起作用。

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

编辑：

我也在寻找这些元素在移动尺寸时堆叠。例如：

label1
input1

label2
input2

Answer 1

+ 移动

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
 body {
    margin: 10px;
}


.row.flex {
    display: flex;
    align-items: flex-end;
}

@media (max-width: 767px) {
.row.flex .col-xs-6 {
    width: 100%;
}
label {
    margin-top: 5px;
}
.row.flex {
    flex-flow: wrap;
}
}

<div class="container-fluid">
    <div class="row flex">
        <div class="col-xs-6">
            <label class="control-label" for="total_contribution_months">A very large and long label for an input A very large and long label for an input</label>
            <input id="total_contribution_months" class="form-control" type="text">
        </div>
        <div class="col-xs-6">
            <label class="control-label" for="age">Same height as left</label>
            <input id="age" class="form-control">
        </div>
    </div>
</div>