Fix layout Flexbox - html

Question

I am having an issue w/ flexbox layout. I want this part of my layout to be like this:
However for some reason its actually like this:
And also I want all of the element to stuck next to each (ESPECIALLY THE BOXES IMAGE) other when screen was resize to smaller sizes.
Wondering what to fix on my CSS for both the flexbox codes and media queries to do that?
Here's my CSS:
#media (min-width: 769px) {
.main-header,
.row,
.footer-inner{
width: 80%;
margin: 0 auto;
}
.tagline {
font-size: 1.4em;
}
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.row {
flex: 1;
}
/* =================================
Media Queries
==================================== */
#media (min-width: 769px) {
.main-header,
.main-nav,
.row {
display: flex;
}
.main-header {
flex-direction: column;
align-items: center;
}
}
#media (min-width: 1025px) {
.main-header {
flex-direction: row;
justify-content: space-between;
}
}
YOU CAN EDIT THE JSFIDDLE HERE: https://jsfiddle.net/dnmct9t4/8/
HELP PLEASE!

Answer 1

This is how to fix your flex layout.
#media (max-width: 769px) {
.col {
flex: initial !important;
}
}
Updated the demo
DEMO

Answer 2

Was not able to correct your source on jsFiddle but have done it on Codepen. Have rewritten your CSS a bit, but keep the HTML Structure near same.
html, body {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
.headline,
.tagline {
margin: 0;
color: #fff;
}
/* header */
.main__header {
text-align: center;
padding: 1em 0.7em;
background-color: #34495e;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.main__header a {
display: block;
padding: 10px 15px;
color: #fff;
}
.header__name {
flex: 1 0 auto;
font-size: 1.35em;
margin: 0;
}
.header__navigation {
flex: 1 0 auto;
}
.header__navigation a {
font-size: 1em;
text-transform: uppercase;
}
.header__navigation a:hover {
color: #18bc9c;
}
#media (min-width: 769px) {
.header__navigation a {
display: inline-block;
}
}
#media (min-width: 1025px) {
.main__header {
text-align: left;
flex-direction: row;
}
.header__navigation {
text-align: right;
}
}
/* content */
/* hero */
.content__hero {
color: #fff;
background-color: blue;
text-align: center;
padding: 6.5em 0;
}
.hero__logo {
width: 256px;
}
/* boxes */
.content__boxes {
padding: 1em 0.7em;
box-sizing: border-box;
}
.content__boxes .flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.content__boxes .col {
flex: 0 1 33%;
padding: 1em;
align-self: auto;
}
.content__boxes .col img {
width: 100%;
}
/* about */
.content__about {
background: #18bc9c;
padding: 1em 0.7em;
box-sizing: border-box;
}
.content__about .flex-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.content__about .col {
flex: 2 1 60%;
min-width: 60%;
margin: 15px 5px;
box-sizing: border-box;
}
.content__about .col:last-child {
flex: 1 1 30%;
min-width: 30%;
}
.content__about .white {
flex: 1 0 100%;
margin: 0;
}
/* footer */
.main__footer {
background: black;
color: white;
padding: 1em 0.7em;
}
<header class="main__header">
<h1 class="header__name">
GORONG
</h1>
<nav class="header__navigation">
Home
BLAN
GRLS
</nav>
</header>
<main class="main__content">
<!-- hero -->
<section class="content__hero">
<img class="hero__logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Prague_CoA_CZ.svg/2000px-Prague_CoA_CZ.svg.png">
<h1 class="headline">COLS</h1>
<span class="tagline">KIRK</span>
</section>
<section class="content__boxes">
<h2>BOXES</h2>
<div class="flex-row">
<div class="item-1 col">
<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/submarine.png">
</div><!--/.primary-->
<div class="item-2 col">
<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/submarine.png">
</div><!--/.secondary-->
<div class="item-3 col">
<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/submarine.png">
</div><!--/.tertiary-->
<div class="item-4 col">
<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/submarine.png">
</div><!--/.tertiary-->
<div class="item-5 col">
<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/submarine.png">
</div><!--/.tertiary-->
<div class="item-6 col">
<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/submarine.png">
</div><!--/.tertiary-->
</div>
</section>
<!-- about -->
<section class="content__about">
<h2 class="white">About</h2>
<div class="flex-row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.</p>
</div><!--/.primary-->
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.</p>
</div><!--/.secondary-->
</div>
</section>
</main>
<!-- footer -->
<footer class="main__footer">
<div class="footer-inner">
<span>©2016 KERONG</span>
</div>
</footer>
Hope this is you expected. Here also my codepen.