In the previous post i have shown how you can make element align horizontally and vertically using flaxbox layout.

In this post i will show you an simple example of html responsive page using flexbox.

Html Code:

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Mauris placerat eleifend leo. placerat eleifend
      leo.
    </p>
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

CSS Code: 

body {padding: 2em;}
		.wrapper {
		  display: -webkit-box;
		  display: -moz-box;
		  display: -ms-flexbox;
		  display: -webkit-flex;
		  display: flex;
		  -webkit-flex-flow: row wrap;
		  flex-flow: row wrap;
		  font-weight: bold;
		  text-align: center;
		}
		.wrapper > * {padding: 10px; flex: 1 100%;}
		.header { background: tomato;}
		.footer { background: lightgreen;}
		.main {text-align: left; background: deepskyblue;}
		.aside-1 { background: gold;}
		.aside-2 {background: hotpink;}
		@media all and (min-width: 800px) {
			.main {flex: 3 0px;}
			.aside-1 { order: 1; }
			.main { order: 2;}
			.aside-2 {order: 3;}
			.footer {order: 4;}
		}
		@media all and (min-width: 600px) {
			.aside { flex: 1 auto;}
		}

wrapper >* {
   padding: 10px; flex: 1 100%;
}

Here we tell all the elements inside .wrapper div to be of 100% width.

@media all and (min-width: 800px){
   .main { flex: 2 0px; } 
   .aside-1 { order: 1; } 
   .main { order: 2; } 
   .aside-2 { order: 3; } 
   .footer { order: 4; }
}

In Large screen sizes i.e., at 800px and above we change the size of of the .main div element to take as such size as the other two aside elements and we change the order of the .main div element and first aside  .aside-1 element i.e.

1. Header
2. First aside.
3. Second main.
4. Second aside
5. Footer

@media all and (min-width: 600px){
   .aside { flex: 1 auto; } 
}

In medium screen sizes i.e., at 600px and above we tell the two aside two share the row.

Here in this link you can check the result https://fiddle.jshell.net/mxcrkz8e/1/#

To know more about flexbox please visit this link https://css-tricks.com/snippets/css/a-guide-to-flexbox/