Bootstrap Grid: как обернуть группу форм на маленьких дисплеях

Question

У меня есть сетка начальной загрузки, которая хорошо смотрится на средних экранах.Теперь я хочу улучшить это на меньших экранах (IPad).Например, строка со значением «Staatsangehörigkeit» выводится в значение.

Я пытался играть с группой форм col-sm, без эффектов.

Есть предложения?Спасибо

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <form>
        <div class="form-row">
            <div class="form-group col-md-2">
                <b>Geschlecht:</b>
            </div>
            <div class="form-group col-md-10">
                männlich
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-2">
                <b>Name:</b>
            </div>
            <div class="form-group col-md-4">
                Wichtig-Ausnahmevereinbarung
            </div>
            <div class="form-group col-md-2">
                <b>Geburtsdatum:</b>
            </div>
            <div class="form-group col-md-4">
                11.11.1970
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-2">
                <b>Geburtsname:</b>
            </div>
            <div class="form-group col-md-4">
                Mustermann
            </div>
            <div class="form-group col-md-2">
                <b>Staatsangehörigkeit:</b>
            </div>
            <div class="form-group col-md-4">
                deutsch
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-2">
                <b>Geburtsort:</b>
            </div>
            <div class="form-group col-md-4">
                Musterhause
            </div>
            <div class="form-group col-md-2">
            </div>
        </div>
    </form>
</div>