How to place icons side by side with media queries - html

Question

I am looking to use media-queries to place my FA icons side by side, when the screen width is below 544px in a nav bar type effect.
I have generated the media queries, as seen below:
/* Media Query for Sidebar */
/* For larger screens */
#media (min-width: 545px) {
span.icon {
display: inline-block;
}
span.text {
display: inline-block;
}
.sidebar {
position: static;
}
}
/* Smaller screens */
#media (max-width: 544px) {
span.icon {
display: inline-block;
float: right;
}
span.text {
display: none;
}
.sidebar {
position: relative;
}
.dashContent {
margin-top: 20px;
}
}
The current result I am getting would be similar to this: see here
My HTML Markup is here
<div class="row">
<div class="col-sm-3 col-xs-12">
<nav class="nav flex-column sidebar">
<a class="nav-link active" href="#"><i class="fas fa-chart-bar icon"></i> <span class="text">Dashboard</span></a>
<a class="nav-link" href="#"><i class="fas fa-cogs icon"></i> <span class="text">My Profile</span></a>
<a class="nav-link" href="#"><i class="fas fa-users icon"></i> <span class="text">Users</span></a>
<a class="nav-link" href="#"><i class="fas fa-graduation-cap"></i> <span class="text">Subjects</span></a>
<a class="nav-link" href="#"><i class="far fa-calendar-alt"></i> <span class="text">Bookings</span></a>
<a class="nav-link" href="#"><i class="fas fa-list-ul"></i> <span class="text">Reviews</span></a>
<a class="nav-link" href="#"><i class="fas fa-comments"></i> <span class="text">Messages</span></a>
<a class="nav-link" href="#"><i class="fas fa-question"></i> <span class="text">Support</span></a>
<a class="nav-link text-danger" href="#"><i class="fas fa-sign-out-alt icon"></i> <span class="text">Logout</span></a>
</nav>
</div>
<div class="col-sm-9 col-xs-12">
<div class="dashContent">
<p>Dashboard content should show up here.</p>
</div>
</div>
</div>
Is there something I am missing when using these media queries to align them?

Answer 1

You might need to add the screen tag to your media query, like so:
#media screen and (max-width: 544px) {
...
}
#media screen and (min-width: 545px) {
...
}
Here's a JSFiddle showing the functionality working:
https://jsfiddle.net/8329pjk9/3/