Bootstrap brings a number of responsive utilities to help you deal with such scenarios.

These utilities are CSS classes that aim to manipulate the presentation of elements based on the screen of the device where the website is being viewed:

Responsive utilities

┌───────────────┬─────────────────────────────────────────────────────────────────────┐
│               │                       Dispositivos (pixeis)                         │
│               ├───────────────┬────────────────┬─────────────────┬──────────────────┤
│  CSS Class    │ Extra small   │ Small          │ Medium          │ Large            │
│               │ Phones (<768) │ Tablets (≥768) │ Desktops (≥992) │ Desktops (≥1200) │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-xs-* │ Visivel       | Escondido      | Escondido       | Escondido        |
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-sm-* │ Escondido     │ Visivel        │ Escondido       │ Escondido        │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-md-* │ Escondido     │ Escondido      │ Visivel         │ Escondido        │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-lg-* │ Escondido     │ Escondido      │ Escondido       │ Visivel          │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-xs    │ Escondido     │ Visivel        │ Visivel         │ Visivel          │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-sm    │ Visivel       │ Escondido      │ Visivel         │ Visivel          │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-md    │ Visivel       │ Visivel        │ Escondido       │ Visivel          │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-lg    │ Visivel       │ Visivel        │ Visivel         │ Escondido        │
└───────────────┴───────────────┴────────────────┴─────────────────┴──────────────────┘

Solution

For your case, the solution is to have the brand in the two desired places, applying the CSS classes on top displayed to either appear in the NavBar or appear in the sidebar as desired:

See example in JSFiddle where you can drag the width of the preview window to see the brand appearing or hiding by the width of the screen:

NavBar

Hide on desktop screens (≥1200) pixels width:

<a class="navbar-brand hidden-lg" href="#">Project name</a>

SideBar

Hide on screens Phones (

<a class="hidden-sm hidden-xs hidden-md" href="#">Project name</a>

HTML for demo

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-lg" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod hendrerit mauris, eget dictum turpis pulvinar semper. Etiam finibus tortor nec mi sodales malesuada. Vestibulum sed dolor id lorem viverra dignissim. Nullam hendrerit nunc vel quam dignissim interdum ut vel nulla. Maecenas nec venenatis nibh, et vehicula odio. Nullam gravida nulla a suscipit aliquam. Vivamus porta est dolor, id tristique massa ultrices ac. Morbi aliquam risus in risus sollicitudin dapibus. Vivamus malesuada interdum neque, aliquet elementum quam porta non. Aenean ac mauris tempus, vestibulum neque id, imperdiet erat. Aliquam et nunc nec nibh convallis tempus vitae at ex. Aenean quis odio nec augue dapibus vulputate non vel lacus. 
        </div>
        <div class="col-sm-4">
            <a class="hidden-sm hidden-xs hidden-md" href="#">Project name</a>
        </div>
    </div>
</div>