quiero que al contexto xs-sm desaparezca el formulario del y me aparezca un botón que al presionar me salga el formulario, me funciona el problema es que al colocarlo en el contexto md para adelante el formulario desaparece y tengo que recargar para que aparezca y no se que este haciendo mal
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="boton-menu hidden-md-up" data-toggle="collapse" data-target="#menu-principal" aria-expanded="false">
<i class="fa fa-bars" aria-hidden="true"></i></button>
<form action="#" method="post" class="collapse" id="menu-principal">
<div class="formulario">
<input type="text" class="formulario1" placeholder="Usuario" required name="usuario">
<input type="password" class="formulario2" placeholder="Contraseña" required name="contra">
<button type="submit" class="btn btn-primary">Ingresar</button>
<a href="" id="enlace">¿Olvidaste tu contraseña? Ingresa aquí.</a>
</div>
</form>
ahora esto pasa cuando lo tengo en el contexto sm y xs que es lo que quiero