Como faço para fazer um simplesFormulário Horizontal de Bootstrap que parece correto no telefone, tablet e computador. Ou seja, quero que os combos sejam alinhados como mostrado no exemplo, mas não quero que os combos sejam maiores que o necessário e só quero um pequeno espaço entre o rótulo e o combo. Então, quando o tamanho da tela for muito pequeno para caber no rótulo e no combo, eu os quero empilhados.

Especificamente, o exemplo do Boostrap usa toda a largura de 100%. Eu não quero isso, não quero que o combo seja mais amplo do que o necessário e não quero uma grande lacuna entre o rótulo e o combo.

Eu tentei adicionarcol-auto mas então os combos não estão mais alinhados horizontalmente um com o outro.

Agora tentei adicionar valores de [1-12] para label e combo, conforme descrito emhttps://getbootstrap.com/docs/4.1/components/forms/#column-sizing mas não empilhou corretamente quando vai para o telefone pequeno.

Então tentei usar col-md para que o total seja menor que 12, mas não parece certo na tela principal, porque agora o rótulo e o combo ocupam o mesmo espaço, de modo que eles têm metade da tela e não estão nem perto um do outro.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div>
    	<div class="form-row">
    	    <label for="discogsGenreOverwriteOption" id="discogsGenreOverwriteOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
    	        Genre
    	    </label>
    	    <div class="col-xs-12 col-sm-3 col-md-2">
    	        <select aria-describedby="discogsGenreOverwriteOptionhelp" class="custom-select" name="discogsGenreOverwriteOption" id="discogsGenreOverwriteOption">
    	            
    	                <option value="0">
    	                    Always replace values
    	                </option>
    	                <option value="1">
    	                    Always add values
    	                </option>
    	                <option value="2">
    	                    Replace if empty
    	                </option>
    	                <option selected="selected" value="3">
    	                    Never Replace
    	                </option>
    	            
    	        </select>
    	    </div>
    	</div>
    	<div class="form-row">
    	    <label for="discogsGenreFromOption" id="discogsGenreFromOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
    	        From
    	    </label>
    	    <div class="col-xs-12 col-sm-3 col-md-2">
    	        <select aria-describedby="discogsGenreFromOptionhelp" class="custom-select" name="discogsGenreFromOption" id="discogsGenreFromOption">
    	            
    	                <option value="0">
    	                    Discogs Style
    	                </option>
    	                <option value="1">
    	                    Discogs Genre
    	                </option>
    	                <option value="2">
    	                    Discogs Style and Genre
    	                </option>
    	            
    	        </select>
    	    </div>
    	</div>
    </div>