how to toggle collapse content right to left beside icon bootstrap 4 - toggle

Question

i am unable to toggle content right to left beside icon can any one can assist me
<div class="container=fluid">
<div class="pos-f-t ">
<div class="collapse " id="navbarToggleExternalContent">
<ul class="navbar-nav flex-row-reverse ">
<li class="nav-item">
<a class="nav-link">Right Link 1</a>
</li>
<li class="navbar-item">
<a class="nav-link">Right Link 2</a>
</li>
</ul>
</div>
<nav class="navbar navbar-dark bg-dark ">
<button class="navbar-toggler ml-auto " type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
</nav>
</div>
</div>

Answer 1

html:
<nav class="navbar navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="">demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-dark" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
css:
.navbar-collapse {
position: absolute;
top: 54px;
left: 100%;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 100%;
transition: all 0.4s ease;
display: block;
}
.navbar-collapse.collapsing {
height: auto !important;
margin-left: 50%;
left: 50%;
transition: all 0.2s ease;
}
.navbar-collapse.show {
left: 0;
}
test it: https://www.codeply.com/go/yggim0FPTG