如何在移动设备上更改元素的浮动

Question

我有一个使用以下代码的导航栏。在桌面上，我希望它是并排的，但是在移动设备上我希望它看起来像一个标准列表，每个li低于前一个。我想只使用1个css文件，两者之间的变化尽可能少。如何使用1个css文件更改不同设备上的布局？

HTML：

<div id="navbar">
    <ul>
        <li class="navitem"><a href="index.php">Home</a></li>
        <li class="navitem"><a href="about.php">About</a></li>
        <li class="navitem"><a href="resume.php">Resume</a></li>
        <li class="navitem"><a href="projects.php">Projects</a></li>
        <li class="navitem"><a href="contact.php">Contact</a></li>
    </ul>
</div><!-- navbar -->

CSS：

/** Navbar Settings */
div#navbar{
    width      : 90%;
    min-height : 25px;
    margin     : 0 auto;
}

div#navbar li{
    display          : inline;
    text-decoration  : none;
    float            : left;
}

div#navbar li.navitem{
    font-size        : 14pt;
    width            : 20%;
    text-align       : center;
}

li.navitem a:visited{
    color            : #9BC2EF; /* Darker Blue */
    text-decoration  : none;
}

我已经查看了Layout of the page on small screens，但它并没有真正回答我的问题，因为我想避免使用媒体标记，因为我在过去使用它们时遇到了问题。