Flexbox and RWSmith Grid

by LyndseyB

HTML

<section class="c-section">
  <div class="u-push-bottom">
    <div class="o-grid o-grid--gutter o-grid--equal-height">
      <div class="o-grid__col u-1/3">
        <div class="c-member u-push-top">
          <span> Picture </span>
          <p>
           Holisticly impact technically sound potentialities after B2B internal or "organic" sources. Synergistically expedite goal-oriented technologies after low-risk high-yield quality vectors. Continually deploy magnetic vortals via market positioning expertise. Dramatically utilize maintainable alignments through intuitive paradigms. Phosfluorescently visualize premium process improvements before real-time functionalities.
          </p>
        </div>
      </div>  
      <div class="o-grid__col u-1/3">
        <div class="c-member">
          <span> Picture </span>
          <p>
           About
          </p>
        </div>
      </div>  
      <div class="o-grid__col u-1/3">
        <div class="c-member u-push-top">
          <span> Picture </span>
          <p>
           About
          </p>
        </div>
      </div>  
      <div class="o-grid__col u-1/3">
        <div class="c-member u-push-top">
          <span> Picture </span>
          <p>
           About
          </p>
        </div>
      </div>
      <div class="o-grid__col u-1/3">
        <div class="c-member">
          <span> Picture </span>
          <p>
           Holisticly impact technically sound potentialities after B2B internal or "organic" sources. Synergistically expedite goal-oriented technologies after low-risk high-yield quality vectors.
          </p>
        </div>
      </div> 
      <div class="o-grid__col u-1/3">
        <div class="c-member u-push-top">
          <span> Picture </span>
          <p>
           About
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

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

body {
  font-size: 1rem;
  margin: 0;
}

.o-grid {
  box-sizing: border-box;
  font-size: 0;
}


.o-grid > .o-grid__col {  
  display: inline-block;
  font-size: 1rem;
}

.o-grid > .o-grid__col > * {
  width: 100%;
}

.o-grid--gutter {
  margin-left: -1rem;
  margin-bottom: -1rem;
}

.o-grid--gutter > .o-grid__col {
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.o-grid--equal-height {  
  flex-wrap: wrap;
}

.o-grid--equal-height,
.o-grid--equal-height > .o-grid__col {
  display: flex;  
}

.u-1\/3 {
  width: 33.33333%;
}

.u-push-bottom {
  margin-bottom: 1rem;
}

.u-push-top {
  margin-top: 1rem;
}

.c-section {
  padding-top: 1rem;
}

.c-member {
  border: 1px solid #e3e2de;
  padding: 1rem;
}