How to align bootstrap navbar from right to left - html

Question

I used the navbar component on my website but I want to align it from the right to left so the first thing coming in the right is Toursitation (Brand Name).
Can you please help me?
this is the code of the navbar:
<Navbar bg="dark" expand="lg" style={{"padding": "0 10px", "background-color": "#132c33 !important"}}>
<Navbar.Brand href="/">TouriStation</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/events" className="navbarSections">Events</Nav.Link>
<Nav.Link href="/resturants" className="navbarSections">Resturants & caffes</Nav.Link>
<Nav.Link href="touristic" className="navbarSections">Touristic</Nav.Link>
<Nav.Link href="accommodations" className="navbarSections">Accomdation</Nav.Link>
<Nav.Link href="malls" className="navbarSections">Malls</Nav.Link>
<Nav.Link href="extraservices" className="navbarSections">Extra services</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" value={this.state.search} onChange={this.onChangeSearch}/>
<Button variant="outline-info" onClick={() => window.location = "/Search/"+(this.state.search)}>Search</Button>
</Form>
<SplitButton style={{"display": this.state.user ? "none" : "block", "color": "white", marginLeft: "0.5%"}} class="text-white"
menuAlign={{ lg: 'right' }}
title="Join Us"
id="dropdown-menu-align-responsive-2"
variant="info"
>
<Dropdown.Item href="/login">Login</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="/register">Register</Dropdown.Item>
</SplitButton>
<SplitButton style={{"display": this.state.user ? "block" : "none" , marginLeft: "0.5%"}} class="text-white"
menuAlign={{ lg: 'right' }}
title="Profile"
variant="info"
id="dropdown-menu-align-responsive-2" >
<Dropdown.Item href="/newplace" style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}}>New Place</Dropdown.Item>
<Dropdown.Item href="/newevent" style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}} >New Event</Dropdown.Item>
<Dropdown.Divider style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}} />
<Dropdown.Item href="/profile">My Account</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="http://localhost:3000/logout/">Sign Out</Dropdown.Item>
</SplitButton>
</Navbar.Collapse>
</Navbar>
Update
that if I use me-auto or '.flex-row-reverse', it will be like this
the orignal one is this

Answer 1

in your code below, remove class name: mr-auto.
<Nav className="mr-auto">
<Nav.Link href="/events" className="navbarSections">Events</Nav.Link>
<Nav.Link href="/resturants" className="navbarSections">Resturants & caffes</Nav.Link>
<Nav.Link href="touristic" className="navbarSections">Touristic</Nav.Link>
<Nav.Link href="accommodations" className="navbarSections">Accomdation</Nav.Link>
<Nav.Link href="malls" className="navbarSections">Malls</Nav.Link>
<Nav.Link href="extraservices" className="navbarSections">Extra services</Nav.Link>
</Nav>