属于不同行时堆叠标签和控件“交叉”

Question

我有一种形式，其中控制标签出现在它们的顶部，而不是出现在它们的一侧，就像这样：

<div class="container">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4">
                <label for="TextControl">Text control</label>
            </div>
            <div class="col-sm-4">
                <label for="NumericControl">Numeric control</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <input label="TextControl" type="text" />
            </div>
            <div class="col-sm-4">
                <input label="NumericControl" type="number" />
            </div>
        </div>
    </div>
</div>

这可以正常工作，因为在全屏模式下显示如下内容：

Text control    Numeric control
| tcontrol |    |  ncontrol   |

但是当我将尺寸调整为更小的尺寸时，标签会一个接一个地堆叠，然后是控件：

Text control    
Numeric control
| tcontrol |
|  ncontrol   |

我希望它看起来像“纵横交错”：标签，后跟相应的控件：

Text control
| tcontrol |    
Numeric control
|  ncontrol   |

我该如何实现？

谢谢。