Flexbox same height across multiple columns with sub elements

Question

I have multiple items in columns. I need them to be equal height across the columns. Also i do need breakpoints so it is required to have the .items arranged as columns. I prepared a snippet but the codepen is better since it is written in scss:

Is it possible without JavaScript?

Situation: The gray and red divs are dynamically filled with content. Since this is required to be responsive it needs to be column based (1,2,3,4). But also i do need equal heights.What I want is:

1. Green Box (.item) same height ✓
2. Responsive (1 Box on XS screens per row, 2 boxes on sm screens and 4 boxes on large screens) ✓
3. Gray items equal height
4. Red items equal height

// see http://codepen.io/anon/pen/xOvBXa for uncompiled scss

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.item {
  background: green;
  padding: 5px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media (min-width: 544px) {
  .item {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .item {
    width: 25%;
  }
}

.top,
.bottom {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  border: 2px blue solid;
}

.top {
  background: #333;
}

.bottom {
  background: red;
}

<!--  
http://codepen.io/anon/pen/xOvBXa
Situation:
The gray and red divs are dynamically filled with content. Since this is required to be responsive it needs to be column based (1,2,3,4).  But also i do need equal heights.What I want is:

1. Green Box (.item) same height ✓
2. Responsive (1 Box on XS screens per row, 2 boxes on sm screens and 4 boxes on large screens)  ✓
3. Gray items equal height 
4. Red items equal height

-->
<div class="row">
  <div class="item">
    <div class="number">1</div>
    <div class="top"><br /><br /><br /></div>
    <div class="bottom"><br /></div>
  </div>
  <div class="item">
    <div class="number">2</div>
    <div class="top"><br /><br /><br /><br /></div>
    <div class="bottom"><br /></div>
  </div>
  <div class="item">
    <div class="number">3</div>
    <div class="top"><br /><br /><br /><br /><br /><br /></div>
    <div class="bottom"><br /><br /></div>
  </div>
  <div class="item">
    <div class="number">4</div>
    <div class="top"><br /><br /><br /><br /></div>
    <div class="bottom"><br /><br /><br /></div>
  </div>
</div>