レイアウトを修正するFlexbox

Question

フレックスボックスレイアウトに問題があります。

そしてまた、私は次のスタックへの要素のすべてをしたい：その実際にこのようないくつかの理由が

：私は私のレイアウトのこの部分はこのようになりたいです画面が小さいサイズにリサイズされたときに、それぞれ別のもの（特にボックス画像）に表示されます。

それをするフレキシボックスコードとメディアクエリの両方のための私のCSSに修正するために何を疑問に思いますか？ https://jsfiddle.net/dnmct9t4/8/

助けてください：

@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; 
    } 


} 

あなたがここにJSFIDDLEを編集することができます。

は、ここに私のCSSです！

Answer 1

フレックスレイアウトを修正する方法です。デモに

DEMO

Answer 2

を更新しました

@media (max-width: 769px) { 
    .col { 
    flex: initial !important; 
    } 
} 

はjsFiddle上のソースを修正することができませんでしたが、Codepenにそれを行っています。あなたのCSSを少し書き直しましたが、HTML構造をほぼ同じに保ちます。

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.headline, 
 
.tagline { 
 
\t margin: 0; 
 
\t 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 { 
 
\t display: block; 
 
\t padding: 10px 15px; 
 
\t color: #fff; 
 
} 
 

 
.header__name { 
 
    flex: 1 0 auto; 
 
    font-size: 1.35em; 
 
\t margin: 0; 
 
} 
 

 
.header__navigation { 
 
    flex: 1 0 auto; 
 
} 
 

 
.header__navigation a { 
 
    font-size: 1em; 
 
\t text-transform: uppercase; 
 
} 
 

 
.header__navigation a:hover { 
 
\t 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; 
 
\t background-color: blue; 
 
    text-align: center; 
 
    padding: 6.5em 0; 
 
} 
 

 
.hero__logo { 
 
\t 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"> 
 
\t \t <h1 class="header__name"> 
 
     <a href="#">GORONG</a> 
 
    </h1> 
 
    <nav class="header__navigation"> 
 
    <a href="#">Home</a> 
 
    <a href="#">BLAN</a> 
 
    <a href="#">GRLS</a> 
 
    </nav> 
 
\t </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"> \t \t 
 
     <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--> \t 
 

 
     <div class="item-4 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/submarine.png"> 
 
     </div><!--/.tertiary--> \t 
 

 

 
     <div class="item-5 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/submarine.png"> 
 
     </div><!--/.tertiary--> \t 
 

 
     <div class="item-6 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/submarine.png"> 
 
     </div><!--/.tertiary--> \t 
 
    </div> 
 
    </section> \t 
 
    <!-- 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>&copy;2016 KERONG</span> 
 

 
    </div> 
 
\t </footer>

これは、あなたが期待されている願っています。ここでも私のcodepenです。