根据容器大小而不是设备/浏览器包装引导程序表单组

Question

我有一个简单的表单，用于添加/编辑联系人。在联系人屏幕上，字段是水平的，下面是列表。我在单击按钮时显示/隐藏它。我有另一个屏幕，我想显示相同的面板，但控件堆叠在一起，就像在移动设备上显示一样。是否有办法使用Bootstrap 4做到这一点，或者我应该只使用另一种形式？

<div class="row collapse" id="edit">
<div class="form-group col-md-2">
    @Html.LabelFor(model => model.Contact.Name):
    @Html.EditorFor(model => model.Contact.Name, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group col-md-2">
    @Html.LabelFor(model => model.Contact.EmailAddress):
    @Html.EditorFor(model => model.Contact.EmailAddress, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group col-md-2">
    @Html.LabelFor(model => model.Contact.Mobile):
    @Html.EditorFor(model => model.Contact.Mobile, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group col-md-2">
    <label>&nbsp;</label>
    <div>
        <input type="reset" id="btnCancel" value="Cancel"
               class="btn btn-primary"
               data-toggle="collapse"
               data-target="#edit"
               aria-expanded="false"
               aria-controls="edit" />
        <input type="submit" id="btnSave" value="Save" class="btn btn-primary" />
    </div>
</div>