Swap nav and div vertically uing CSS only - html

Question

So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a responsive design I have to swap the <nav> and the date <div> when on smaller screen resolutions.
I have read around S.O and I have seen several fixes using CSS for swapping 2 <div>s but I cannot get them to work with my code. I have no idea how to get around this to be honest and all the help is really appreciated. Here's the code snippet:
<header>
<div id="logo">
<img src="images/logo.png" title="Site Name" alt="logo">
</div>
<nav>
<ul>
<li>Day</li>
<li>Week</li>
<li>Month</li>
<li>From-To</li>
</ul>
</nav>
</header>
<div id="date">
<p>Monday 09/03/15 16:16</p>
</div>
Edit:
As requested here's the fix I tried to implement but in vain.
HTML
<div class="swapHack">
<header>
<div id="logo">
<img src="images/logo.png" title="Site Name" alt="logo">
</div>
<nav>
<ul>
<li>Day</li>
<li>Week</li>
<li>Month</li>
<li>From-To</li>
</ul>
</nav>
</header>
<div id="date">
<p>Monday 09/03/15 16:16</p>
</div>
</div>
CSS
.swapHack{
display:table;
width: 100%;
}
.#date {
display: table-header-group;
}
.nav {
display: table-footer-group;
}
Thanks.

Answer 1

The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css.
.swapHack{
display:table;
width: 100%;
}
#date {
display: table-header-group;
}
nav {
display: table-footer-group;
}
<div class="swapHack>"
<header>
<div id="logo">
<img src="images/logo.png" title="Site Name" alt="logo" />
</div>
<nav>
<ul>
<li>Day</li>
<li>Week</li>
<li>Month</li>
<li>From-To</li>
</ul>
</nav>
</header>
<div id="date">
<p>Monday 09/03/15 16:16</p>
</div>
</div>