JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="dropdown">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

* {
    padding: 0;
    margin: 0;
}
ul {
    list-style-type: none;
    display: block;
}
.menu li {
    float: left;
    width: 190px;
    background: lightgreen;
}
.dropdown {
    width: 100px;
    float: right;
    background: lightblue;
}
.dropdown li {
    display: none;
}
@media screen and (max-width: 800px) {
    .dropdown li:nth-child(4) {
        display: block;
    }
    .menu li:nth-child(4) {
        display: none;
    }
}
@media screen and (max-width: 700px) {
    .dropdown li:nth-child(3) {
        display: block;
    }
    .menu li:nth-child(3) {
        display: none;
    }
}
@media screen and (max-width: 600px) {
    .dropdown li:nth-child(2) {
        display: block;
    }
    .menu li:nth-child(2) {
        display: none;
    }
}
@media screen and (max-width: 500px) {
    .dropdown li:nth-child(1) {
        display: block;
    }
    .menu li:nth-child(1) {
        display: none;
    }
}