flex layout (vertical base)

by James Connolly

HTML

<div class="wrapper">

  <div class="product-cards mq">
    <div class="product-card">
      card 1
    </div>
    <div class="product-card">
      card 2
    </div>
    <div class="product-card">
      card 3
    </div>
  </div>

</div>
<!-- wrapper -->

SCSS

body {
  font-family: arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 50px auto;
  width: 100%;
  max-width: 800px;
  background: red;
  
  &.mq {
    max-width: 400px;
  }
}

///////// actual needed styles /////////

.product-cards {
  
  .product-card {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    
    margin-bottom: 20px;
    padding: 50px;
    background: skyblue;
    border-radius: 6px;
    box-sizing: border-box;
    
    
  }
  
  // media query
  
  &.mq {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    height: 500px;
    min-height: 500px;
    
    .product-card {
      margin-bottom: 0;
      width: calc(40% - 20px;);
      min-height: calc(50% - 10px);
      
      &:nth-child(1) {
        flex: 0 1 100%;
        background: orange;
        width: 60%;
        height: 500px;
        margin-right: 20px;
      }
    }
  }
}