CSS li items placement using top - html

Question

I have a ul li list placed horizontal.
These li items in turn contain a tag and img tag within each li.
These are ideally icons-menus.
Here is what I want - In desktop and tablet the li list all li items should be horizontal.
When viewed in phone, one of the li items - the 1st item should be placed in top right corner, and rest of the remaining li as horizontal.
This should be responsive across all the phone screens.
How to achieve this.
I have used top and right style to this particular li which should be shown in top right corner but in some screens it goes out, and placement is not proper, how to achieve this ?
Below is the code.
.navbar-nav {
display: flex;
justify-content: space-between;
}
#media (max-width: 767px) {
.mobView {
top: -8vh;
right: -40vh;
}
}
<ul class="navbar-nav navbar-right">
<!-- **This li needs to be at the top right corner when viewed in phone screen** -->
<li class="dropdown mobView">
<a href="javascript:void(0);">
<img src="1.svg" class="imgicon">
<span class="username">li 1</span>
</a>
</li>
<li class="dropdown" id="li2">
<a href="javascript:WindowLocation('/123');">
<img src="2.svg" class="imgicon">
<span class="hidden-xs">li 2</span>
</a>
</li>
<li class="dropdown" id="li3">
<a href="javascript:WindowLocation('/123');">
<img src="3.svg" class="imgicon">
<span class="hidden-xs">li 3</span>
</a>
</li>
<li class="dropdown" id="li4">
<a href="javascript:WindowLocation('/123');">
<img src="4.svg" class="imgicon">
<span class="hidden-xs">li 4</span>
</a>
</li>
</ul>
In desktop
In mobile wanted like this :

Answer 1

I hope I have been helpful
.navbar-nav {
display: flex;
justify-content: space-between;
}
#media (max-width: 767px) {
.navbar-nav li {
position: absolute;
list-style: none;
}
.navbar-nav li:nth-child(1) {
top: 50px;
left: 10px;
}
.navbar-nav li:nth-child(2) {
top: 10px;
right: 10px;
}
.navbar-nav li:nth-child(3) {
top: 50px;
right: 80px;
}
.navbar-nav li:nth-child(4) {
top: 50px;
right: 10px;
}
}
<ul class="navbar-nav navbar-right">
<!-- **This li needs to be at the top right corner when viewed in phone screen** -->
<li class="dropdown mobView">
<a href="javascript:void(0);">
<img src="1.svg" class="imgicon">
<span class="username">li 1</span>
</a>
</li>
<li class="dropdown" id="li2">
<a href="javascript:WindowLocation('/123');">
<img src="2.svg" class="imgicon">
<span class="hidden-xs">li 2</span>
</a>
</li>
<li class="dropdown" id="li3">
<a href="javascript:WindowLocation('/123');">
<img src="3.svg" class="imgicon">
<span class="hidden-xs">li 3</span>
</a>
</li>
<li class="dropdown" id="li4">
<a href="javascript:WindowLocation('/123');">
<img src="4.svg" class="imgicon">
<span class="hidden-xs">li 4</span>
</a>
</li>
</ul>