Usando este código:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <label class="col-2 col-form-label">Email</label>

    <div class="col-8">
      <input type="text" class="form-control">
    </div>

    <div class="col-2">
      text
    </div>

  </div>
 </div>

Se você redimensionar a janela para o menor tamanho, a grade será quebrada.

Aqui está oBootply ligação.

Basta abrir a visualização e redimensionar sua janela para o menor tamanho, e a grade será quebrada.

Três colunas devem permanecer na mesma linha, mas no menor tamanho, a última coluna passa para a linha inferior.

Isso acontece nas duas versões (4 e 3,7 (col-xs-2))

Como isso pode ser consertado?