Tengo el siguiente code:
<div class="card-header bg-white">
<div id="people-filters" class="bg-white">
<form method="POST" action="http://p.miurl.local" accept-charset="UTF-8" id="search-form">
<input value="xxxxxx" type="hidden" name="_token" class="field-token" /> <input value="1" id="field-page" type="hidden" name="page" class="field-page" />
<div class="d-none d-lg-block">
<div class="row m-t-10 d-flex align-items-center">
<div class="col-3"><h3>Title</h3></div>
<div class="col-4 d-flex align-items-center">
<span class="text-nowrap">Sort by:</span>
<div class="form-group w-100 m-0 pl-3">
<select
id="field-sort-by"
name="sort_by"
data-value=""
data-null-option="Sort By"
accesskey="s"
class="custom-select form-control field-sort-by select2-hidden-accessible"
tabindex="-1"
aria-hidden="true"
data-select2-id="field-sort-by"
>
<option value="" selected="selected" data-select2-id="9">Sort By</option>
<option value="first_name.asc">Name</option>
<option value="created_at.desc">Newest</option>
</select>
<span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="8" style="width: 342.828px;">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-field-sort-by-container">
<span class="select2-selection__rendered" id="select2-field-sort-by-container" role="textbox" aria-readonly="true" title="Sort By">Sort By</span>
<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
</div>
</div>
<div class="col-1"></div>
<div class="col-4 d-flex align-items-center">
<span>Search</span>
<div class="form-group w-100 m-0 pl-3"><input placeholder="Search users" value="" id="field-name" accesskey="n" type="text" name="name" class="people-name-search form-control field-name" /></div>
</div>
</div>
</div>
</form>
</div>
</div>
Le he agregado <div class="d-none d-lg-block">
para evitar que el actual code solamente se muestre en pantallas XL y LG, pero no se como hacer para que se vea bien en pantallas MD, SD y XS.
He intentado lo siguiente sin exito:
<div class="d-lg-none d-xl-none">
<div class="row">
<div class="text-center d-flex justify-content-center flex-sm-row flex-column">
<div class="col-6 col-sm-4 col-md-3"><h3>Title</h3></div>
<div class="col-7 col-sm-6 col-md-4 d-flex align-items-center">
<span class="text-nowrap">Sort by:</span>
<div class="form-group w-100 m-0 pl-3">
<select name="sort_by" data-value="" data-null-option="Sort By" accesskey="s" class="custom-select form-control field-sort-by select2-hidden-accessible" tabindex="-1" aria-hidden="true" data-select2-id="12">
<option value="" selected="selected" data-select2-id="14">Sort By</option>
<option value="first_name.asc">Name</option>
<option value="created_at.desc">Newest</option>
</select>
<span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="13" style="width: auto;">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-sort_by-p3-container">
<span class="select2-selection__rendered" id="select2-sort_by-p3-container" role="textbox" aria-readonly="true" title="Sort By">Sort By</span>
<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
</div>
</div>
<div class="col-1"></div>
<div class="col-7 col-sm-6 col-md-4 d-flex align-items-center">
<span>Search</span>
<div class="form-group w-100 m-0 pl-3"><input placeholder="Search users" value="" accesskey="n" type="text" name="name" class="people-name-search form-control field-name" /></div>
</div>
</div>
</div>
</div>