如果缩放，Bootstrap 4中的一排表格无响应

Question

我的网站上有一个表单，希望将其显示为一行。如果我缩放，它将对md sm和xs变得无响应。这是Codepen和我的示例。感谢您的帮助。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form class="col-md-12" style="display: flex; align-items: center">
                <label class="d-inline" for="inlineFormInput" style="font: 22px italic">Transaction Summary</label> 
 <label style="font-size: 12px" class="ml-1 mr-1" for="inlineFormInput">Submitted time</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0 mr-lg-5" id="inlineFormInput" (select)="onDateSelection($event)" ngbDatepicker #d="ngbDatepicker" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden" (click)="d.toggle()"/>
                <input style="width: 200px" class="form-control mr-1" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker (click)="d.toggle()" [markDisabled]="isDisabled" #d="ngbDatepicker">

            <ng-template #customDay let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
            <span class="custom-day" [class.weekend]="isWeekend(date)" [class.focused]="focused"
                    [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
            </span>
            </ng-template>
                <label style="font-size: 12px" class="mr-1" for="inlineFormInput">Status</label>
                <input type="text" style="width: 200px" class="form-control mb-2 mb-sm-0" id="inlineFormInput">
                <div class="input-group mb-2 mr-sm-2 mb-sm-0 col-md-5 col-lg-4">
                    <label style="font-size: 12px" class="mr-1 mt-1" for="inlineFormInputGroup">Search</label>
                    <div class="input-group-prepend">
                    <span class="input-group-text bg-white"><i class="fa fa-search"></i></span>
                    </div>
                    <input type="text" style="width: 125px" class="form-control border-left-0 mr-2" id="inlineFormInputGroup" placeholder="Enter anything here!">
                    <button type="text" class="btn btn-primary mr-2 d-inline"><i class="fa fa-search mr-1"></i>Filter</button>
                    <button type="text" class="btn btn-dark d-inline"><i class="fa fa-file-export mr-1"></i>Export</button>
                </div>
            </form>