Navbar bootstrap collapse

I need a navbar customization that is as follows:

First, without the collapse, appear this way (this I did and it's very quiet)

Then,whenyouhavesmallerscreens,turnon2buttonsandseparatethemenusintoprofileandsearch:

TheproblemisthatwhenIcreatethecontentsofthesecondnavbar-collapse,itdoesnotappearonlyonsmallerscreens,aswiththeprofile.The"collapse navbar-collapse" div does not disappear on the larger screens.

My code is as follows:

HTML

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-profile" aria-expanded="false">
                <img class="profile" src="img/profile.jpg" />
            </button>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-search" aria-expanded="false">
                <i class="fa fa-search"></i>
            </button>
            <a class="navbar-brand" href="#">
                Menu
            </a>
        </div>

        <!-- Deve aparecer somente quando estiver em telas menores -->
        <div class="collapse navbar-collapse" id="navbar-collapse-search">
            <div class="form-group has-feedback">
                <input type="text" class="form-control">
                <span class="fa fa-search form-control-feedback"></span>
            </div>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-profile">
            <!-- Just when collapsed -->
            <ul class="nav navbar-nav collapsable">
                <li><a href="#"><i class="fa fa-cog"></i>&nbsp;&nbsp;Configurações</a></li>
                <li><a href="#"><i class="fa fa-sign-out"></i>&nbsp;&nbsp;Sair</a></li>
            </ul>

            <!-- Hide when collapsed -->
            <div class="collapse-hide">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img class="profile" src="img/profile.jpg" />&nbsp;&nbsp;Claudio Neto&nbsp;<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a>
                                    <i class="fa fa-cog"></i>&nbsp;&nbsp;Configurações
                                </a>
                            </li>
                            <li>
                                <a>
                                    <i class="fa fa-sign-out"></i>&nbsp;&nbsp;Sair
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group has-feedback search-bar">
                        <input type="text" class="form-control">
                        <span class="fa fa-search form-control-feedback"></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</nav>

CSS

@media (min-width: 767px) {
  .collapsable {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .collapse-hide {
    display: none;
  }
}