flex wrap and "columns"

by jonahe

HTML

<div class="container">
  <article>
    <div class="text first">
      test 1 testest1  tets test 1 testest1  tets test 1 testest1  tets test 1 testest1  tets test 1 testest1  tets test 1 testest1  tets test 1 testest1  tets 
      test test test 
    </div>
    <div  class="image first"></div>
  </article>
  
  <article>
    <div class="text second">
      test 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, ctest 2 testtest 2, c
    </div>
    <div  class="image second"></div>
  </article>
  <article>
    <div class="text third">
      test 3 testtest3 test 3 testtest3 test 3 testtest3 test 3 testtest3 test 3 testtest3 test 3 testtest3 test 3 testtest3 test 3 testtest3 
      test 3 testtest3 test 3 testtest3 
      test 3 testtest3 test 3 testtest3 test 3 testtest3 
      test 3 testtest3 test 3 testtest3 test 3 testtest3 test 3 testtest3 
      test 3 testtest3 test 3 testtest3 test 3 testtest3 test 3 testtest3 
    </div>
    <div  class="image third"></div>
  </article>
  <article>
    <div class="text fourth">
      test 4 testtest4test 4 testtest4test 4 testtest4test 4 testtest4test 4 testtest4test 4 testtest4test 4 testtest4
      test 4 testtest4test 4 testtest4
    </div>
    <div  class="image fourth"></div>
  </article>
  
  
  <article>
    <div class="text fifth">
      test 5  test 5 test 5 test 5 test 5 test 5 test 5 test 5
    </div>
    <div  class="image fifth"></div>
  </article>
  
  <article>
    <div class="text sixth">
      test 6 
    </div>
    <div  class="image sixth"></div>
  </article>
  <article>
    <div class="text seventh">
       test 7 test 7test 7test 7test 7test 7test 7test 7test 7test 7test 7test 7test 7test 7test 7test 7test 7test 7
    </div>
    <div  class="image seventh"></div>
  </article>
  <article>
    <div class="text eighth">
   ...

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  background: tomato;
}

article {
  display: flex;
  flex-grow: stretch;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  align-self: stretch;
  padding: 10px 10px;
  width: 50%;
}

article .image {
  height: calc(3/4 * (50vw - 10px ));
  background-origin: content-box;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

article:nth-child(odd) .image {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
}

article:nth-child(even) .image {
   background-image: url("http://wiesmann.codiferes.net/share/bitmaps/test_pattern.svg");
}





@media only screen and (max-width: 440px) {
  .container {
    
  }
  article {
    width: 100%;
  }
  .container .image {
    height: calc(3/4 * (100vw - 20px));
  }
}

@media only screen and (min-width: 800px) {
  .container {
    
  }
  article {
    width: 33.3%;
  }
  .container .image {
    height: calc(3/4 * (33vw - 10px));
  }
}