title: How to RTL bootstrap 3 navbar
body: <p>I'm not a front-end developer and I have this bootstrap 3.3.6 navbar. I want it to be RTL, that is: logo on the right-most corner and the menu items flow from Right to left after the logo. </p>
  
  <pre><code> &lt;nav class="navbar navbar-default navbar-fixed-top text-right" role="navigation"&gt;
              &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="navbar-brand" href="#"&gt;
                      &lt;img src="~/Content/Images/logo.png" class="img-responsive"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
              &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Main&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Main2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Main3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Main4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!-- /.navbar-collapse --&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>I know there are quite a few similar questions on SO, and I've tried many, but none solved my issue. So appreciate your help.</p>