sangress/index.html

## index.html
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header class="main-header">Bootstrap Workshop</header>
        <nav class="main-nav">
            <ul>
                <li><a href="#">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <main class="main-content">
            <article>papa</article>
            <article>lala</article>
            <article>mama</article>
            <!--<article>papa</article>
            <article>lala</article>
            <article>mama</article>
            <article>papa</article>
            <article>lala</article>
            <article>mama</article>
            <article>papa</article>
            <article>lala</article>
            <article>mama</article>-->
        </main>
        <footer class="main-footer"><strong>Foo</strong>ter</footer>

    </body>
</html>

## main.scss

html, body {
  height: 100%;
}

body {
    margin: 0;
    padding: 0;
  // step 1: set display flex (in this case the body)
  display: flex;

  // step 2: set the direction of the elements
  flex-direction: column;

  // play with flex-direction
  //flex-direction: row-reverse;
  //flex-direction: column-reverse;

}

.main-nav {
  order: -1;

  li {
    width: 100px;
  }

  a {
    text-decoration: none;
    color: black;
    font-size: 21px;
    font-weight: 600;
    color: #00a9d9;

    &:hover {
      text-decoration: underline;
    }
  }

  ul {
    list-style: none;
    // step 3: set the navigation style
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.main-header {
  background: #B61E32;
  color: #FFFFDF;
  padding: 10px;
}
.main-content {
  background: #F7CE2B;
  min-height: 40vh;
  padding: 10px;
  // step 4: grow elements
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1; // will use that extra space

  article {
    margin: 5px;
    border: 1px solid #7F8FB1;
    box-sizing: border-box;
    // step 5: set all elements to be the same size and take all space
    flex: 0 0 200px;
    /* flex-grow: 1;
       flex-shrink: 1;
       flex-basis: 0;
    */
  }
}
.main-footer{
  background: #ABC999;
  padding: 10px;
  order: 1;
}

/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (max-height: 640px) {
  .main-content {
    flex-direction: column;
    flex-basis: 320px;
    overflow: auto;
    flex-wrap: nowrap;
  }
  .main-nav {
    ul {
      // step 3b: set the direction on media-quary
      flex-direction: column;
    }
  }
}
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<!-- Place favicon.ico in the root directory -->

	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
	<header class="main-header">Bootstrap Workshop</header>
	<nav class="main-nav">
	<ul>
	<li><a href="#">Work</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</nav>
	<main class="main-content">
	<article>papa</article>
	<article>lala</article>
	<article>mama</article>
	<!--<article>papa</article>
	<article>lala</article>
	<article>mama</article>
	<article>papa</article>
	<article>lala</article>
	<article>mama</article>
	<article>papa</article>
	<article>lala</article>
	<article>mama</article>-->
	</main>
	<footer class="main-footer"><strong>Foo</strong>ter</footer>

	</body>
	</html>

	html, body {
	height: 100%;
	}

	body {
	margin: 0;
	padding: 0;
	// step 1: set display flex (in this case the body)
	display: flex;

	// step 2: set the direction of the elements
	flex-direction: column;

	// play with flex-direction
	//flex-direction: row-reverse;
	//flex-direction: column-reverse;

	}

	.main-nav {
	order: -1;

	li {
	width: 100px;
	}

	a {
	text-decoration: none;
	color: black;
	font-size: 21px;
	font-weight: 600;
	color: #00a9d9;

	&:hover {
	text-decoration: underline;
	}
	}

	ul {
	list-style: none;
	// step 3: set the navigation style
	display: flex;
	flex-direction: row;
	align-items: center;
	}
	}

	.main-header {
	background: #B61E32;
	color: #FFFFDF;
	padding: 10px;
	}
	.main-content {
	background: #F7CE2B;
	min-height: 40vh;
	padding: 10px;
	// step 4: grow elements
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1; // will use that extra space

	article {
	margin: 5px;
	border: 1px solid #7F8FB1;
	box-sizing: border-box;
	// step 5: set all elements to be the same size and take all space
	flex: 0 0 200px;
	/* flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	*/
	}
	}
	.main-footer{
	background: #ABC999;
	padding: 10px;
	order: 1;
	}

	/* Portrait and Landscape */
	@media screen
	and (device-width: 320px)
	and (max-height: 640px) {
	.main-content {
	flex-direction: column;
	flex-basis: 320px;
	overflow: auto;
	flex-wrap: nowrap;
	}
	.main-nav {
	ul {
	// step 3b: set the direction on media-quary
	flex-direction: column;
	}
	}
	}