<h1>Latest Firefox only (10/2016)<br>(Now working in Chrome 65)
</h1>
<p>Using display contents to create CSS table cells that wrap into columns and still maintain integrity with the data. Resize the page smaller to see the effect and notice how cells maintain column integrity.</p>

<div class="wrap">
  <div class="row row4">
    <div class="row row2">
      <div class="cell">Cell content goes here with more text than other cells</div>
      <div class="cell">Cell content goes here<br>
        Cell content goes here</div>
    </div>
    <div class="row row2">
      <div class="cell"><span>Cell content fixed width element</span></div>
      <div class="cell">Cell content goes here</div>
    </div>
  </div>
  <div class="row row4">
    <div class="row row2">
      <div class="cell">Cell content goes here<br>
        Cell content goes here</div>
      <div class="cell">Cell content goes here</div>
    </div>
    <div class="row row2">
      <div class="cell">Cell content goes here</div>
      <div class="cell">Cell content goes here</div>
    </div>
  </div>
</div>

p,
h1 {
  max-width: 1080px;
  margin: 1em auto;
  text-align: center;
}

span {
  display: block;
  padding: 5px;
  background: red;
  width: 160px;
}

.wrap {
  display: table;
  width: 100%;
  max-width: 1080px;
  margin: auto;
  border-collapse: collapse;
}

.row {
  display: table-row
}

.cell {
  display: table-cell;
  vertical-align: top;
  border: 1px solid red;
  padding: 10px
}

.row4,
.row2 {
  display: contents
}

@media screen and (max-width:900px) {
  .row4 {
    display: table-row
  }
}

@media screen and (max-width:700px) {
  .row4 {
    display: contents
  }
  .row2 {
    display: table-row
  }
}

@media screen and (max-width:500px) {
  .row4,
  .row2,
  .cell {
    display: block;
  }
  .cell {
    margin-bottom: -1px
  }
}