Code examples for my Quantity Queries meet Flexbox post.

first-pass.css

.listing--events {
  display: flex;
  flex-wrap: wrap;
}

.event {
  box-sizing: border-box;
  padding: 1.25rem; /* 20px padding */
  margin: 0 0 1.25rem 0; /* 20px bottom margin */
  flex: 0 0 100%;
}

markup.html

<ul class="listing listing--events">
  <li class="listing__item listing__item--1 event event--future">
    <!-- content -->
  </li>
  <!-- lis continue -->
</ul>

second-pass.css

.listing--events {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.event {
  box-sizing: border-box;
  padding: 1.25rem; /* 20px */
  margin: 0 0 1.25rem 0; /* 20px v */
  flex: 0 0 100%;
}

@media only screen and (min-width: 28.75em) {
  
  /* 20px gap divided by 2 events per row */
  .event {
    flex: 0 0 calc( 50% - 1.25rem / 2 );
    margin-left: 1.25rem; /* 20px < */
  }
  
  /* Remove left margin for row starters */
  .event:nth-child(odd) {
    margin-left: 0;
  }
  
  /* Reset margins on "future" events
     & remove the correct one */
  .event--future:nth-child(odd) {
    margin-left: 1.25rem;
  }
  .event--future:nth-child(even) {
    margin-left: 0;
  }
  
  /* Quantity Query - when more than 1,
     make the first span both columns  */
  .event--future:nth-last-child(n+1):first-child {
    flex: 0 0 100%;
    font-size: 1.5em;
    margin-left: 0;
  }
  
}

third-pass.css

.listing--events {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.event {
  box-sizing: border-box;
  padding: 1.25rem; /* 20px */
  margin: 0 0 1.25rem 0; /* 20px v */
  flex: 0 0 100%;
}

@media only screen and (min-width: 28.75em) {
  
  /* 20px gap divided by 2 events per row */
  .event {
    flex: 0 0 calc( 50% - 1.25rem / 2 );
    margin-left: 1.25rem; /* 20px < */
  }
  
  /* Remove left margin for row starters */
  .event:nth-child(odd) {
    margin-left: 0;
  }
  
  /* Reset margins on "future" events
     & remove the correct one */
  .event--future:nth-child(odd) {
    margin-left: 1.25rem;
  }
  .event--future:nth-child(even) {
    margin-left: 0;
  }
  
  /* Quantity Query - when more than 1,
     make the first span both columns  */
  .event--future:nth-last-child(n+1):first-child {
    flex: 0 0 100%;
    font-size: 1.5em;
    margin-left: 0;
  }
  
}

@media only screen and (min-width: 43.125em) {

  /* 1/3 width with 20px gutter */
  .event {
    flex: 0 0 calc( 100% / 3 - .875rem );
  }

  /* Reset margins */
  .event:nth-child(even),
  .event:nth-child(odd) {
    margin-left: 1.25rem;
  }
  /* Normal Grid margin removal */
  .event:nth-child(3n+1) {
    margin-left: 0;
  }
  
  /* Correct margins for the future events */
  .event--future:nth-child(3n+1) {
    margin-left: 1.25rem;
  }
  
  /* Quantity Query - when more than 2,
     make the first 2 go 50%  */
  .event--future:nth-last-child(n+2):first-child, 
  .event--future:nth-last-child(n+2):first-child + .event--future {
    flex: 0 0 calc( 50% - 1.25rem / 2 );
    font-size: 1.5em;
  }
  
  /* Quantity + nth for margin removal */
  .event--future:nth-last-child(n+2):first-child ~ .event--future:nth-child(3n) {
    margin-left: 0;
  }
  
}