The type container .input-group has the CSS property display:flex .
Existing that property, by default it will try to put all the children elements in the same row.
To alter the default behavior, you have to modify the flex-wrap property (by default its value is nowrap ) and put it in wrap . You also have to get the label wide enough to force a new row. I would leave it like this
#formulario {
display:flex;
}
#formulario .input-group {
flex-wrap:wrap;
width:100%
}
#formulario label {
width:100%;
display:block;
}
But the other problem is that the way you have structured the HTML causes the textarea to be outside the form . I would leave it instead as
<div class="row">
<div class="col-md-12 col-lg-12">
<form id="formulario">
<div class="col-lg-4">
<div class="input-group mb-3">
<span class="input-group-addon">
<i class="fa fa-user fa-fw"></i>
</span>
<input class="form-control nombre" type="text" name="nombre" placeholder="Nombre">
</div>
<div class="input-group mb-3">
<span class="input-group-addon">
<i class="fa fa-envelope-o fa-fw"></i>
</span>
<input class="form-control email" type="text" name="email" placeholder="E-mail">
</div>
<div class="input-group mb-3">
<span class="input-group-addon">
<i class="fa fa-mobile fa-fw"></i>
</span>
<input class="form-control celular" type="text" name="celular" placeholder="Celular" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');">
</div>
<button type="submit" class="btn btn-success align-s enviar">
<i class="fa fa-paper-plane fa-lg mr-2"></i>Enviar
</button>
<button type="reset" class="btn btn-danger align-s">
<i class="fa fa-trash-o fa-lg mr-2"></i>Borrar
</button>
</div>
<!-- FORM LADO DERECHO -->
<div class="col-lg-8">
<span class="input-group-addon">
<i class="fa fa-commenting fa-fw"></i>
</span>
<textarea class="form-control mensaje" rows="6" name="mensaje" placeholder="Escriba su mensaje..."></textarea>
</div>
</form>
</div>
</div>
I left it running on link