The problem I have is that when I open the form on the mobile, the label appears in one line and the input in another. This is not very useful to me as it takes up a lot of space. When I widen it a little more, they do put label and input in the same line. I have tried col-xs-4 and col-xs-8 for label and input to see if that is how they are put on one line but nothing.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row ">
<div class=" col-md-12 col-xs-12 ">
<form>
<div class="form-group row mb-0 ">
<label class="col-sm-2 col-form-label">Parte</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm " id="parte" placeholder="Parte">
</div>
</div>
<div class="form-group row mb-0">
<label for="staticEmail" class="col-sm-2 col-form-label">Fecha</label>
<div class="col-sm-10 ">
<div class="input-group date fecha" id="fechaP" data-target-input="nearest" >
<div class="input-group-prepend" data-target="#fechaP" data-toggle="datetimepicker" >
<div class="input-group-text " ><i class="fa fa-calendar"></i></div>
</div>
<input type="text" id="fecha" class="form-control form-control-sm datetimepicker-input datetimepicker" placeholder="Fecha" data-target="#fechaP"/>
</div>
</div>
</div>
<div class="form-group row mb-0">
<label for="staticEmail" class="col-sm-2 col-form-label">Hora Inicio</label>
<div class="col-sm-10">
<div class="input-group date hora" id="hInicioP" data-target-input="nearest" >
<div class="input-group-prepend hora" data-target="#hInicioP" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
<input type="text" id="hInicio" class="form-control form-control-sm datetimepicker-input " placeholder="Hora Inicio" data-target="#hInicioP"/>
</div>
</div>
</div>
<div class="form-group row mb-0">
<label for="staticEmail" class="col-sm-2 col-form-label">Hora Fin</label>
<div class="col-sm-10">
<div class="input-group date hora" id="hFinP" data-target-input="nearest" >
<div class="input-group-prepend hora" data-target="#hFinP" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
<input type="text" id="hFin" class="form-control form-control-sm datetimepicker-input " placeholder="Hora Fin" data-target="#hFinP"/>
</div>
</div>
</div>
<div class="form-group row mb-0">
<label for="inputPassword" class="col-sm-2 col-form-label">Tipo Movimiento</label>
<div class="col-sm-10">
<select class="form-control form-control-sm" id="tipMovimiento">
</select>
</div>
</div>
<div class="form-group row mb-0">
<label for="inputOrigen" class="col-sm-2 col-form-label ">Origen</label>
<div class="col-sm-10">
<select class="form-control form-control-sm centro" id="origen">
</select>
</div>
</div>
<div class="form-group row mb-0">
<label for="inputDestino" class="col-sm-2 col-form-label ">Destino</label>
<div class="col-sm-10">
<select class="form-control form-control-sm centro" id="destino" >
</select>
</div>
</div>
<div class="form-group row mb-0">
<label for="inputChofer" class="col-sm-2 col-form-label">Chofer</label>
<div class="col-sm-10">
<select class="form-control form-control-sm " id="chofer">
<option>Chofer</option>
</select>
</div>
</div>
<div class="form-group row mb-0">
<label for="inputCamion" class="col-sm-2 col-form-label">Camión</label>
<div class="col-sm-10">
<select class="form-control form-control-sm " id="camion">
</select>
</div>
</div>
<div class="form-group row mb-3">
<label for="inputCamion" class="col-sm-2 col-form-label">Observaciones</label>
<div class="col-sm-10">
<textarea class="form-control" id="observaciones" rows="2"></textarea>
</div>
</div>
</form>
</div>
</div>
You just need to remove the xs (col suffix), because in later versions of Bootstrap 4.x the suffix xs (Extra small) is no longer used , in your case it would just be col-[n]. Example:
<div class="col-12">foo</div>Note: You can see in more details: Bootstrap Grid
Retaking your code would be: