Quiero hacer que el botón de la imagen del clip se coloque a un lado de la caja de texto cuando se visualice en una pantalla chica
tengo este codigo css:
<style>
.adjuntar
{
width: 34px;
height: 27px;
background-image: url(../img/adjuntar.png);
background-position: 0% 0%;
background-repeat: no-repeat;
background-size: 30px 20px;
background-color: transparent;
}
.boton
{
left: 36%;
top: 25%;
position: fixed;
}
@media only screen and (max-width: 480px){
.boton
{
left: 500%;
top: 80%;
position: fixed;
}
}
</style>
Tengo este codigo html:
<form class="form-inline" id="form-registro">
<div class="form-group" style="width: 45%;">
<label style="margin-right: 4px;">Parcial:</label>
<input type="text" class="form-control" name="parcialVal" id="parcialVal">
</div>
<input type="button" id="boton" class="btn adjuntar boton" data-toggle="modal" data-target="#modal-archivos" disabled>
</form>
El problema es que cuando hago la pantalla chica no se mueve ese botón (el de la imagen del clip) y cuando la pantalla esta grande si se acomoda bien, ¿cual es el problema?
Asi se ve ahorita en pantalla chica y el botón del clip esta mal acomodado