collapse inline form bootstrap

i've added a inline-form to my page, in the main area,

the form is a bit to wide, i would like that it collapse at 991px,

but the rest of the page can collapse at 767px

i understand it can be done with mediaquery but not sure on what to code.

i'm stuck here! what can i do?

i copied the inline form originally from a navbar of a file, the button is working fine.

it look like this:

<div class="text-center">
       <button        
      class="btn btn-default form-toggle" 
      type="button" 
      data-toggle="collapse" 
      data-target="#collapseExample" 
      aria-expanded="false" 
      aria-controls="collapseExample"> 
      <span class="sr-only">Toggle navigation</span>
      Reservations 
      </button>
</div>

<div id="collapseExample" class="navbar-collapse collapse">

    <div class="text-center ">

     <form class="form-inline navbar-form" name="bookerform"  action="---" method="GET" target="_self">
           <div class="form-group">hidden elements</div>
           <div class="form-group">arrivo</div>
           <div class="form-group">partenza</div>
           <div class="form-group text-left"> Numero N</div>
           <div class="form-group text-left"> Numero A</div>
           <div class="form-group text-left"> Numero B</div>
           <div class="form-group"> button check</div>
      </form>

    </div>

 </div>

   <!-- Form end -->