Help With Flex

Hi Guys,

I need a little help with understanding Flex.  I would like to rearange the layout of this page.  Currently the header goes across the top.  The next row is a nav area on the left followed by an article area and then an aside.  The last row is the footer.  I've figured out the order property but I cannot seem to make sense of the flex property used by naviagation and rightcolumn.   I would like to move navigation making it a row under the header.  The third row becomes an aside where the navigation is currently.  Everything else stays where it is.  Here's the HTML.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Holy Grail</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

	<div id="headerwrapper">
		<header id="header">Header</header>
    </div>
 
	<div id="main">
  		<article id="content">Content</article>
  		<nav id="navigation">Navigation</nav>
  		<aside id="rightcolumn">Right Aside</aside>
	</div>
	
	<div id="footerwrapper">
		<footer id="footer">Footer</footer>
    </div>
</body>
</html>

Here's the styles.css

@1552174 url("reset.css");
@import url("colors.css");
@import url("responsive.css");

body {
  font: 2em Helvetica;
  background: #ddd;
  color: #666;
}

#main {
  min-height: 800px;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: row;
}

#header {
  display: block;
  min-height: 100px;
  margin: .1em;
  padding: .2em;
  border-radius: 3px;
  border: 1px solid #666;
  background: white;
}

#navigation {
  flex: 1 6 20%;
  order: 1;
  margin: .1em;
  padding: .2em;
  border-radius: 3px;
  border: 1px solid #666;
  background: white;
}

#content {
  flex: 3 1 60%;
  order: 2;
  margin: .1em;
  padding: .2em;
  border-radius: 3px;
  border: 1px solid #666;
  background: white;
}

#rightcolumn {
  flex: 1 6 20%;
  order: 3;
  margin: .1em;
  padding: .2em;
  border-radius: 3px;
  border: 1px solid #666;
  background: white;
}

#footer {
  display: block;
  min-height: 100px;
  margin: .1em;
  padding: .2em;
  border-radius: 3px;
  border: 1px solid #666;
  background: white;
}

 and here's the responsive css.

@media all and (max-width: 640px) {
	
  #page {
    flex-direction: column;
  }
	
  #main {
    flex-direction: column;
  }
	
  #header {
    min-height: 50px;
    max-height: 50px;
  }

  #navigation {
    order: 0;
    min-height: 50px;
    max-height: 50px;
  }
	
  #content {
    order: 0;
  }
	
  #rightcolumn {
    order: 0;
    min-height: 50px;
    max-height: 50px;
  }
	
  #footer {
    min-height: 50px;
    max-height: 50px;
  }
}

Any help you can provide is appreciated   Thanks.