title: making a square div within a row a vertical rectangle?
body: <p>I have created a responsivee grid layout and its all working wonderfully, however now the last thing I need to do is to make a couple of the squares rectangular. </p>
  
  <p>The ones I need to make rectangular are the top two squares in the second column of my grid and the last two squares in the bottom row of my grid. A you can see I have done the horizontal rectangle, now I need to do the same vertically with the top two squares in the second column.</p>
  
  <p>Can somebody please show me how to do this and keep the spinning action as I have tried it and not been able to do it properly.</p>
  
  <p>Thanks</p>
  
  <p><strong><em>CSS</em></strong></p>
  
  <pre><code>.trigger{
      width:200px; 
      height:200px; 
      margin-right:15px;
      margin-bottom:15px; 
  }
  .hover-img, 
  .hover-img.hover_effect  {
      background-color:white;
      position: relative;
      width: 200px;
      height: 200px;
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      -webkit-transform-style: preserve-3d;
      text-align: center;
      font-size: 0;
      -webkit-user-select: none;
      -webkit-touch-callout: none; 
      border-style: solid;
      border-width: 1px;
      border-color: #4595ff;
  }
  .trigger:hover &gt; .hover-img {
       -webkit-transform:rotateY(360deg);
      -moz-transform:rotateY(360deg);
      -ms-transform:rotateY(360deg);
      -o-transform:rotateY(360deg);
      transform:rotateY(360deg);
      font-size:14px;
      color:white;
  }
  
  .img1 {
      background-size: 100% 100%;
      background-repeat: no-repeat; 
  }
  .img1:hover{
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  
  .img2 {
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .img2:hover{
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  
  .img3 {
      background-size: 100% 100%;
      background-repeat: no-repeat;
  } 
  .img3:hover{
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .img4 {
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .img4:hover{
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .img5 {
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .img5:hover{
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .img6 {
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .img6:hover{
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  
  #container{
      width:960px; margin: 0 auto;
  }
  
  .row{
      display: flex;
  }
  </code></pre>
  
  <p><strong><em>HTML</em></strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img1"&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img2"&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img3"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img4"&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div  class="row"&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img5"&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img6"&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img5"&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img6"&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div  class="row"&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img5"&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img6"&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img5"&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="trigger"&gt;
              &lt;div tabindex="0" class="maincontent hover-img img6"&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>