Button on the left side of the navigation mark

Question

I am trying to put a button on the left side of the navigation mark to switch the sidebar. The button toggles the sidebar. In desktop mode, it works great, but on small screens it changes position and approaches the right side of the navigation mark. Here are the screenshots.

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <button type="button" data-toggle="#sidebar" id="sidebar-toggle" class="navbar-left navbar-toggle">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="Login.aspx" style="vertical-align: middle">
                    <img src="Logo.png" style="vertical-align: middle" /></a>
                <label class="navbar-text text-center text-primary" style="vertical-align:10px;font-size:medium">Example Distribution</label>
            </div>
            <div class="navbar-collapse collapse" id="navbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Dashboard</a></li>
                    <li><a href="#">Settings</a></li>
                    <li><a href="#">Profile</a></li>
                    <li><a href="#">Help</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search..." />
                </form>
            </div>
        </div>
    </nav>
    <div class="container-sidebar">
        <div id="sidebar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Explore</a></li>
                <li><a href="#">Users</a></li>
                <li><a href="#">Sign Out</a></li>
            </ul>
        </div>
    </div>

Answer 1

Just add this code to document.ready

There may be an alternative to CSS, but I feel it is easy!

Demo

$(document).ready(function(){
    if($(window).width()<768)
    {
        $('#sidebar-toggle').css('float','left');
    }
    $(window).on('resize',function(){
        if($(window).width()<768)
        {
            console.log('here');
              $('#sidebar-toggle').css('float','left');
        }
    });
});

CSS solution:

@media screen and (max-width: 768px) {
     #sidebar-toggle{
        float:left !important;
     }
}

Updated DEMO

Answer 2

Just add this css class DEMOpull-left

  <button type="button" data-toggle="#sidebar" id="sidebar-toggle" class=" navbar-toggle pull-left">