Q:

Align content of boxes vertically in responsive grid (set same height for all boxes)

I am using a responsive grid and I want each box to have all its contents vertically aligned. Each box will have a different position of the content (structure). In this case (for now), I have two boxes and they work fine separately. When I include them in the grid, the grid is no longer responsive. 
For example, the first box will look like this:

and the second box will look like this:

So, far... I have built the main grid and I am trying to align the items using the first box template. I am trying to find the best solution. I am guessing the change is related to the .example-feature-staggered-row:

h1,h2{letter-spacing:-.04em;text-align:center;line-height:1.2em}h1,h2,h3{text-align:center}h1,h2,h4{line-height:1.2em}h3,h4{margin-bottom:12px;letter-spacing:-.03em}h2,h5{margin-bottom:16px}h3,h5{line-height:1.3em;margin-top:0}h1,h2,h3,h4,h5,h6{font-family:'Circular Medium',sans-serif;font-weight:500}h6,p{margin-bottom:10px}h2,h3,h4,h5,h6{margin-top:0}h1{font-size:3.875em}h2{font-size:2.75em}h3{font-size:2em}h4{font-size:1.375em}h5{font-size:1.25em;letter-spacing:-.02em}h6{font-size:.875em;line-height:1.4em}.grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:-16px;margin-left:-16px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.grid.gutter--small{margin-right:-8px;margin-left:-8px}.grid.no-gutter{margin-right:0;margin-left:0}.grid.justify--center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.example-body,.example-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;-webkit-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}.example-body{display:flex;margin-bottom:64px;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;border-radius:6px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 6px 12px 0 rgba(0,0,0,.1)}.example-body.orange{background-color:#F2987D;color:#fff}.example-body.green{background-color:#E9F0E0;color:#000}.example-body.lightblue{background-color:#00a7f7;color:#00a7f7}.example-center{display:flex;min-height:512px;padding:48px;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;color:#fff}.example-features-figure,.example-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-header{display:flex;margin-bottom:102px;padding-right:32px;padding-left:32px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.example-features-figure{display:flex;width:60px;height:60px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;border-radius:999px;background-color:#a4d7a5}.example-feature-columns,.example-fluid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-features-text{padding-left:16px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.example-feature-title{margin-bottom:8px;text-align:left}.example-feature-subtitle,.example-logo{margin-bottom:0}.example-feature-title.reversed{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:right}.example-feature-title.centered{text-align:center}.example-feature-subtitle.reversed{text-align:right}.example-feature-subtitle.centered{text-align:center}.example-logo{margin-top:0;text-transform:uppercase}.example-wrapper{padding-right:32px;padding-bottom:32px;padding-left:32px;background-color:#eef1f3}.example-wrapper.cyan{background-color:#dff7fa}.example-wrapper.blue{background-color:#e2f2fe}.example-wrapper.orange{background-color:#fff3df}.example-wrapper.deeppurple{background-color:#ede7f6}.example-wrapper.purple{background-color:#f3e5f5}.example-wrapper.red{background-color:#ffebee}.example-wrapper.teal{background-color:#dff2f1}.example-wrapper.pink{background-color:#fde4ec}.example-wrapper.green{background-color:#e8f5e9}.example-wrapper.lightblue{background-color:#e0f5ff}.example-wrapper.amber{background-color:#fff8e0}.example-fluid{display:flex;min-height:600px;padding:16px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.example-center-title{margin-bottom:0;text-align:center}.example-center-figure{margin-bottom:12px}.example-equal-height-caption{padding:16px;font-size:.875em;line-height:1.5em}.example-feature-columns{display:flex;padding:32px 16px;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.example-feature-column,.example-feature-column-figure{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-feature-column{display:flex;padding-right:16px;padding-bottom:12px;padding-left:16px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.example-feature-column.sibling{-webkit-box-flex:0;-webkit-flex:0px;-ms-flex:0px;flex:0px;border-left:1px solid #63bc66}.example-feature-column-figure{display:flex;width:100px;height:100px;margin-bottom:16px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-radius:999px;background-color:#a4d7a5}.example-feature-staggered,.example-feature-staggered-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-feature-staggered{display:flex;padding:0 40px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.example-feature-staggered-row{display:flex;padding-top:32px;padding-bottom:32px;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:1.25em;line-height:1.4em}.example-feature-staggered-figure,.example-grid-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-feature-staggered-row.sibling{border-top:1px solid #63bc66}.example-feature-staggered-row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.example-feature-staggered-figure{display:flex;width:160px;height:160px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;border-radius:999px}.example-feature-staggered-text{padding-right:24px;padding-left:24px}.example-grid{padding:32px 32px 12px}.example-grid-container{display:flex;margin-right:-8px;margin-left:-8px;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.cover-wrapper{position:relative;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:80px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media (max-width:991px){.cover-wrapper,.section-header{margin-bottom:64px}.grid{margin-right:-12px;margin-left:-12px}.grid.tablet-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.example-center{min-height:480px}.example-header{padding-right:24px;padding-left:24px}.example-equal-height{min-height:400px;padding:48px 40px;font-size:14px;line-height:1.5em}.example-fluid,.example-hero{min-height:480px;line-height:1.5em}.example-equal-height-figure{height:140px}.example{padding-top:64px}.example-features-figure{width:48px;height:48px}.example-features-text{padding-left:12px}.example-wrapper{padding-right:24px;padding-bottom:0;padding-left:24px}.example-fluid{padding:12px;font-size:14px}.example-feature-columns{padding:24px 12px;font-size:14px;line-height:1.5em}.example-feature-column{padding-bottom:6px}.example-feature-column-figure{width:80px;height:80px}.example-feature-staggered{padding-right:24px;padding-left:24px;font-size:12px}.example-grid,.example-hero{font-size:14px}.example-feature-staggered-row{padding-top:24px;padding-bottom:24px}.example-feature-staggered-figure{width:120px;height:120px}.cover-item{-webkit-flex-basis:19%;-ms-flex-preferred-size:19%;flex-basis:19%}.example-hero{padding:12px}.example-hero-figure{width:128px;height:128px}}@media (max-width:767px){h3,h4,h5{margin-bottom:8px}body{font-size:14px;line-height:1.4em}h1{font-size:2.75em}h2{margin-bottom:12px;font-size:2em}h3{font-size:1.5em}.section-description,h4{font-size:1.25em}.section.padded{padding:48px 16px}.container.large.shifted,.container.medium.shifted{margin-top:-64px}.grid{margin-right:-8px;margin-left:-8px}.grid.mobilel-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.example-body{margin-bottom:32px}.example-center{min-height:320px;padding:22px}.example-header{margin-bottom:64px;padding-right:16px;padding-left:16px}.example-equal-height{min-height:0;padding:24px 16px;font-size:10px;line-height:1.4em}.example-equal-height-figure{height:120px}.cover-title{margin-bottom:16px}.cover-subtitle{margin-bottom:32px;font-size:1.25em}.section-header{margin-bottom:48px}.expander-body{margin-top:16px;margin-bottom:16px}.example-features-figure{width:32px;height:32px;padding:8px}.example-features-text{padding-left:8px}.example-feature-title{margin-bottom:4px}.example-wrapper{padding-right:16px;padding-left:16px}.example-fluid{min-height:320px;padding:8px;font-size:10px;line-height:1.4em}.example-center-figure{width:64px;height:64px}.example-equal-height-caption{padding:12px}.example-feature-columns{padding:16px 8px;font-size:11px}.example-feature-column-figure{width:64px;height:64px;margin-bottom:8px;padding:16px}.example-feature-staggered{padding-right:16px;padding-left:16px;font-size:10px}.example-feature-staggered-row{padding-top:16px;padding-bottom:16px}.example-feature-staggered-figure{width:96px;height:96px;padding:24px}.example-grid{padding:16px 16px 4px}.example-grid-container{margin-right:-6px;margin-left:-6px}.cover-item{-webkit-flex-basis:24%;-ms-flex-preferred-size:24%;flex-basis:24%}.logos-text{margin-bottom:12px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.cover-logo{position:absolute;left:0;top:0;right:0;z-index:2000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:120px;height:48px;margin-right:auto;margin-left:auto;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.cover-logo-image{opacity:.6}}@media (max-width:479px){h1{font-size:2em}h2{font-size:1.75em}.grid.mobile-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.cover{padding:1rem;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.example-body{margin-bottom:16px;border-radius:4px}.example-center{min-height:240px;padding:16px;font-size:12px}.example-header{padding-right:12px;padding-left:12px}.example-equal-height{padding:12px 8px;font-size:8px}.example-equal-height-card{margin-right:4px;margin-left:4px;border-radius:2px}.example-equal-height-figure{height:80px;padding-right:24px;padding-left:24px}.section-header{margin-bottom:48px}.example-features-text{padding-left:6px}.example-wrapper{padding-right:12px;padding-left:12px}.example-fluid{min-height:240px;padding:6px;font-size:6px}.example-equal-height-caption{padding:6px}.example-feature-columns{padding-top:12px;padding-bottom:12px;font-size:10px}.example-feature-column{padding-right:12px;padding-bottom:0;padding-left:12px}.example-feature-column-figure{width:48px;height:48px;padding:12px}.example-feature-staggered{padding-right:12px;padding-left:12px;font-size:8px}.example-feature-staggered-row{padding-top:12px;padding-bottom:12px}.example-feature-staggered-figure{width:64px;height:64px;padding:16px}.example-feature-staggered-text{padding-right:12px;padding-left:12px}.example-grid{font-size:12px}.example-grid-container{margin-right:-4px;margin-left:-4px}.cover-wrapper{margin-bottom:32px}}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-xs-6 col-md-4">
          <div class="example-body green">
             <div class="example-feature-staggered">
                <div class="example-feature-staggered-row">
                   <div class="example-feature-staggered-figure"><img src="https://cdn0.iconfinder.com/data/icons/simplicity/512/dollar-256.png" width="76"></div>
                   <div class="example-feature-staggered-text">
                      <p class="example-feature-title">111 111</p>
                      <h3 class="example-feature-subtitle">3.2M</h3>
                   </div>
                   <div class="example-feature-staggered-text">
                      <p class="example-feature-title">333</p>
                      <h3 class="example-feature-subtitle">-10%</h3>
                   </div>
                </div>
             </div>
          </div>
  </div>
  <div class="col-xs-6 col-md-4">
          <div class="example-body green">
             <div class="example-feature-staggered">
                <div class="example-feature-staggered-row">
                   <div class="example-feature-staggered-text">
                      <h3 class="example-feature-subtitle">111</h3>
                      <h3 class="example-feature-subtitle">222</h3>
                      <h3 class="example-feature-subtitle">333</h3>
                   </div>
                   <div class="example-feature-staggered-text">
                      <h3 class="example-feature-subtitle"><b>AAA</b></h3>
                      <h3 class="example-feature-subtitle"><b>BBB</b></h3>
                      <h3 class="example-feature-subtitle"><b>BBB</b></h3>
                   </div>
                </div>
             </div>
          </div>
  </div>
  <div class="col-xs-6 col-md-4">
    <div class="example-body orange">
        <div class="example-feature-staggered">
            <div class="example-feature-staggered-row">
                <div class="example-feature-staggered-figure"><img src="https://cdn4.iconfinder.com/data/icons/dot/256/man_person_mens_room.png" width="96"></div>
                <div class="example-feature-staggered-text">
                    <p class="example-feature-title">111 111</p>
                    <h3 class="example-feature-subtitle">105,306</h3>
                </div>
                <div class="example-feature-staggered-text">
                    <p class="example-feature-title">333333</p>
                    <h3 class="example-feature-subtitle">-44%</h3>
                </div>
            </div>
            <div class="example-feature-staggered-row">
                <div class="example-feature-staggered-figure"><img src="https://cdn4.iconfinder.com/data/icons/developer-set-3/128/arrowupright-256.png" width="76"></div>
                <div class="example-feature-staggered-text">
                    <p class="example-feature-title">22222</p>
                    <h3 class="example-feature-subtitle">35.05%</h3>
                </div>
                <div class="example-feature-staggered-text">
                    <p class="example-feature-title">- </p>
                    <h3 class="example-feature-subtitle">+6%</h3>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

I am trying to think of the best solution here. For example. the table might be a solution. Using two columns (for the first template). Each column will have two rows where the items (text and images) will be vertically aligned. The rows of the first column will have a sub-table. Each sub-table will have two columns. The first column will have the image. The second column will have two rows with the text. Is that a good idea? Or is it better to find a more responsive way to achieve that? 
Separately, the boxes are fine. I just cannot make them work in the grid without problems (the height is not the same. If I make it the same, the content is not always vertically aligned).

A:

With your current setup, you will need to add media queries at certain breakpoints to restyle the content.
You have giving a lot of elements fixed widths and set them to flex: 0 0 auto; which will stop them from shrinking below their given width.
Also, you could benefit from simplifying your code.
You can create this layout with flex containers. Below is a rough example of what this might look like.

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: calc(50% - 40px);
  background: #e9f0e1;
  min-height: 100px;
  min-width: 100px;
  margin: 20px;
}

.one {
  background: #f09880;
}

.three {
  background: #e9f0e1;
}

.content {
  padding: 10px;
  margin: 10px;
  background: seagreen;
  color: white;
}

@media screen and (max-width: 500px) {
  .wrap {
    display: block;
  }
}

@media screen and (max-width: 360px) {
  .container {
    display: block;
  }
  .wrap {
    width: calc(100% - 40px);
  }
}
<div class='container'>
  <div class='wrap one'>
    <div class='item'>
      Icon
    </div>
    <div class='item'>
      Text
    </div>
    <div class='item'>
      Text
    </div>
  </div>
  <div class='wrap two'>
    <div class='item'>
      <div class='content'>
        one
      </div>
      <div class='content'>
        two
      </div>
    </div>
    <div class='item'>
      <div class='content'>
        one
      </div>
      <div class='content'>
        two
      </div>
    </div>
    <div class='item'>
      <div class='content'>
        one
      </div>
      <div class='content'>
        two
      </div>
      <div class='content'>
        three
      </div>
    </div>
  </div>
  <div class='wrap three'>
    <div class='item'>
      Icon
    </div>
    <div class='item'>
      <div class='content'>
        Text
      </div>
      <div class='content'>
        Text
      </div>
    </div>
    <div class='item'>
      <div class='content'>
        Text
      </div>
      <div class='content'>
        Text
      </div>
    </div>
  </div>
</div>

