Estou tentando montar uma grid usando a doc do bootstrap mas está muito confuso!
A largura máximo do iframe que carrega os forms é de 868px.
Essa é uma simulação abrindo no tablet em pé e gostaria de mudar a forma dos campos.
Somente nos celulares ficar o form ficar full.
Gostaria que essa visualização do tablet ficasse assim:
1º Row) Nome, deixar o imput no tamanho 6 (metade da tela).
2º Row) Banco, Agencia e Conta, separa-las no tamanho 4, para ficar na mesma visualização da primeira imagem.
To tentando fazer isso, mas já estou com nó no cérebro!
<form method="post" autocomplete="off">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label">Nome para essa conta</label>
<input name="nome" type="text" class="form-control" id="" value="" placeholder="Ex: conta principal" required/>
</div>
</div>
</div>
<div class="space-4"></div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label class="control-label">Banco</label>
<input name="banco" type="text" class="form-control" id="" value="" required/>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label class="control-label">Agencia</label>
<input name="agencia" type="text" class="form-control" id="" value="" required/>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label class="control-label">Conta</label>
<input name="conta" type="text" class="form-control" id="" value="" required/>
</div>
</div>
</div>
<div class="space-4"></div>
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label">Gerente</label>
<input name="gerente" type="text" class="form-control" id="" value="" placeholder="Nome / telefone" />
</div>
</div>
</div>
<div class="space-4"></div>
</form>