How to let brand stay on the right on collapse in bootstrap 3

Question

I would like to have a brand on the right and the navigation on the left. It works on a big screen, but on collapse the brand is going to the left and the "burger button" to the right. I would like to have it vice versa (menu always on the left and brand always right). My only idea now is to make it over custom css, but I would like to have it over bootstrap classes if possible.

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <a href="#" class="navbar-brand navbar-right">
        <img src="logo.jpg" />
      </a>
      <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
            </button>     
      </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
              <li ><a class="main_nav_link" href="#">Link 1</a></li>
              <li ><a class="main_nav_link" href="#">Link 2</a></li>
              <li ><a class="main_nav_link" href="#">Link 3</a></li>
              </li>
            </ul>
    </div>
  </div>
</nav>

Answer 1

You can try the bootstrap classes: pull-left and pull-right

<a href="#" class="navbar-brand navbar-right pull-right">

and

<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="navbar-collapse">

Check if this fiddle is what you want.