CSS Flexbox一塌糊涂

Question

我已经水平对齐4个div，并且每个div内部都垂直对齐3个div。

html代码：

 <!-- menu-section  -->
           <section class="menu section">

             <div class="module about-me">
                <div class="portfolio-title">
                    <h1>PORTFOLIO</h1>
                </div>
                <div class="portfolio-center"><div id="bckg_portfolio"></div></div>
                <div class="portfolio-bottom"></div>
             </div>


             <div class="module tutorials">
               <div class="tuts-title" >

               </div>
               <div class="tuts-center tuts"></div>
                <div class="tuts-bottom"></div>
             </div>


             <div class="module drawings">
               <div class="art-title" >

               </div>
               <div class="art-center art"></div>
                <div class="art-bottom"></div>
             </div>


             <div class="module photos">
               <div class="photography-title" >

               </div>
               <div class="photography-center photography"></div>
                <div class="photography-bottom photography"></div>
             </div>

           </section>
           <!-- menu-section END -->

CSS代码：

    .section.menu{background-color: #323237;}
.menu{display: flex;flex-direction:row;height: 100vh;width: 100vw;}
@media screen and (max-width:768px) {
  .menu{
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .module{
     min-width: 100%;
  }
}
/*------------- sections end ---------------*/


/*------------- modules  ---------------*/
.module{
  flex-grow: 1;
  background: #ccc;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  transition: .2s all;
  cursor: pointer;
  padding: 2em;
  box-sizing: border-box;
  text-align: center;
  width: 25vw;
  flex-flow: column;
}

.module:not(:first-child) {
   margin-left:0.5px;
}

/*.module:hover{
    flex-grow: 1.5;
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.1);
}*/

.about-me{
    order:1;
    background-color: #75CDF3;
}
.tutorials{
    order:2;
    background-color: #98F4FF;
}
.drawings{
   order:3;
   background-color: #D6AAFF;
}
.photos{
  order:3;
   background-color: #DBE2EC;
}

.portfolio-title{
   width: 25vw;
   color: #fff;
   flex:1;
}
.portfolio-center{
   width: 25vw;
   flex:1; 
}
.portfolio-bottom{
  width: 25vw; 
  flex:1;
}
#bckg_portfolio{
  height: 250px;
  background-color: #fff;
  -webkit-transform: skewY(-7deg);
  -moz-transform: skewY(-7deg);
  -ms-transform: skewY(-7deg);
  -o-transform: skewY(-7deg);
  transform: skewY(-7deg);
}

当我向其他模块添加以bckg_和<h1>标题开头的id时，所有模块都会像这样混乱：