css - Bootstrap NavBar non-collapsable input field -

i have nav bar input field , couple links want links collapsed. i'm trying work few hours no success.

it doesn't stay on single row

what want this

desktop

| [brand name] [input field___________________________(search)]       [button] [button] | 

mobile

 | [brand name] [input field     (search)] [#] |  |---------------------------------------------|  |  button                                     |  |  button                                     | 

http://www.bootply.com/g1jjxemqa0#

another atempt http://www.bootply.com/n3raobttyd

take @ this: https://jsfiddle.net/9l3b08zf/

if change size of result grid, see how link jump form side bottom.

i have used bootstrap grid achieve this.

<div class="row"> <div class="col-md-6 search">      <form class="navbar-form" role="search" method="get" id="search-form" name="search-form">         <div class="input-group">             <input type="text" class="form-control" placeholder="e.g.: www.google.com" id="query" name="query" value="">             <div class="input-group-btn">                 <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"> locate</span></button>              </div>          </div>        </form> </div> <div class="col-md-6 buttons">      <div class="collapse navbar-collapse navbar-ex1-collapse ">     <div class="row">         <div class="col-md-6"><a data-toggle="modal" href="#" data-target="#">login</a></div>         <div class="col-md-6"><a data-toggle="modal" href="#" data-target="#">register</a></div>     </div>     </div> </div>