<form class="hgm-form horizontal">
    <div class="row mb-1">
        <label class="col-sm-2 col-xs-12" for="exampleInput">Example Input</label>
        <div class="col-sm-10 col-xs-12">
            <input id="exampleInput" type="text" placeholder="Example Input" />
        </div>
    </div>

    <fieldset class="row mb-1">
        <div class="col-sm-2 col-xs-12">
            Radio group
        </div>
        <div class="col-sm-10 col-xs-12">
            <div class="hgm-form__check">
                <input id="exampleRadio" type="radio" name="example_radio" />
                <label for="exampleRadio">Example radio</label>
            </div>
            <div class="hgm-form__check">
                <input id="exampleRadio2" type="radio" name="example_radio" />
                <label for="exampleRadio2">Example radio 2</label>
            </div>
        </div>
    </fieldset>

    <div class="row mb-1">
        <div class="col-sm-10 col-sm-offset-2 col-xs-12">
            <div class="hgm-form__check">
                <input id="exampleCheckbox" type="checkbox" />
                <label for="exampleCheckbox">Example checkbox</label>
            </div>
        </div>
    </div>

    <div class="row mb-1">
        <div class="col-sm-10 col-sm-offset-2 col-xs-12">
            <div class="hgm-form__switch">
                <input id="exampleSwitch" name="switch_one" type="checkbox" />
                <label for="exampleSwitch">
                    <span class="switch-rail">
                        <span class="switch-slider"></span>
                    </span>
                    Example switch
                </label>
            </div>
        </div>
    </div>

</form>
<form class="hgm-form horizontal">
    <div class="row mb-1">
        <label class="col-sm-2 col-xs-12" for="exampleInput">Example Input</label>
        <div class="col-sm-10 col-xs-12">
            <input id="exampleInput" type="text" placeholder="Example Input" />
        </div>
    </div>

    <fieldset class="row mb-1">
        <div class="col-sm-2 col-xs-12">
            Radio group
        </div>
        <div class="col-sm-10 col-xs-12">
            <div class="hgm-form__check">
                <input id="exampleRadio" type="radio" name="example_radio"/>
                <label for="exampleRadio">Example radio</label>
            </div>
            <div class="hgm-form__check">
                <input id="exampleRadio2" type="radio" name="example_radio"/>
                <label for="exampleRadio2">Example radio 2</label>
            </div>
        </div>
    </fieldset>

    <div class="row mb-1">
        <div class="col-sm-10 col-sm-offset-2 col-xs-12">
            <div class="hgm-form__check">
                <input id="exampleCheckbox" type="checkbox"/>
                <label for="exampleCheckbox">Example checkbox</label>
            </div>
        </div>
    </div>


    <div class="row mb-1">
        <div class="col-sm-10 col-sm-offset-2 col-xs-12">
            <div class="hgm-form__switch">
                <input id="exampleSwitch" name="switch_one" type="checkbox"/>
                <label for="exampleSwitch">
                    <span class="switch-rail">
                        <span class="switch-slider"></span>
                    </span>
                    Example switch
                </label>
            </div>
        </div>
    </div>

</form>
/* No context defined. */

Responsive behavior

Use the flexbox grid system to control at which breakpoints the horizontal stacking order of the form collapses into a single vertical column.

As a general rule thumb, use col-xs-12 (mobile breakpoint) to force 100% width of columns.