[Resolvido] Erro de formataçao web to mobile

Olá, estou criando um modal para o usuário preencher alguns dados. Realizei a formatação em colunas com o bootstrap em web, porém, ao passar para mobile, a formatação muda tudo. Gostaria de sugestões de como poderia solucionar o problema.

Não manjo muito da responsividade.

	Segue abaixo as imagens mobile e web, respectivamente, junto ao código do modal;

	 

	/monthly_2020_11/image.png.22ab73fc270e9076b629114026770490.png" />/monthly_2020_11/image.png.badfaa8553dc687223861a5cc25731c5.png" />

 <div class="modal fade" id="modalAutentMonitor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="exampleModalLabel">Autenticar monitor</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="modal-body text-md-center">
 <!--SEÇÃO-->
 <div class="form-row">
 <div class="form-group">
 <div class="col-12 col-md-12">
 <input type="password" class="form-control" id="codigo_monitor" name="codigo_monitor" placeholder="Código:">
 <br>
 </div>
 </div>

 <div id="botoes_monitor" class="col-6 col-md-8 offset-md-2">
 <button type="submit" name="btnAutentMonitor" id="btnAutentMonitor" class="btn btn-outline-warning">Enviar</button>
 <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalSelecionar" data-dismiss="modal">Voltar</button>
 </div>
 </div>

 <h6 class="text-center" id="resposta_c_r"></h6>
 <div id="correto" class="d-none"><i class='iconize fas fa-thumbs-up'></i></div>
 <div id="incorreto" class="d-none"><i class='iconize fas fa-thumbs-down'></i></div>
 </div>
 </div>
 </div>
 </div>