Really Responsive Tables using CSS Flexbox (complex)

<div class="container-fluid" style="margin-top: 10px">
  <div class="table-row header">
    <div class="column index">#</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Title</div>
          <div class="column comment">Comment</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Module</div>
          <div class="column reporter">Reporter</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status">Status</div>
          <div class="column owner">Owner</div>
        </div>
        <div class="column severity">Severity</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div title="Watch" class="column watch">
        <span class="glyphicon glyphicon-eye-open"></span>
      </div>
      <div title="Add comment" class="column add-comment">
        <span class="glyphicon glyphicon-comment"></span>
      </div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Created</div>
      <div class="column date">Updated</div>
      <div class="column date">Due</div>
    </div>
  </div>

<div class="table-row">
    <div class="column index">1</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">App crashes when dragged by title bar</div>
          <div class="column comment">Eddie, can you please take a look. We want this fixed pretty soon.</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Main App</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-primary">Open</span></div>
          <div class="column owner">Eddie</div>
        </div>
        <div class="column severity high">High</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open active" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Feb-1, 2016</div>
      <div class="column date">Mar-13, 2016</div>
      <div class="column date">Apr-4, 2016</div>
    </div>
  </div>

<div class="table-row">
    <div class="column index">2</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Unable to save the data when using Enter key instead of clicking on submit button.</div>
          <div class="column comment">Let me take this up.</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Save Screen</div>
          <div class="column reporter">Kiran</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-primary">Open</span></div>
          <div class="column owner">Vasan</div>
        </div>
        <div class="column severity medium">Medium</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open active" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Mar-3, 2016</div>
      <div class="column date">Apr-4, 2016</div>
      <div class="column date">May-15, 2016</div>
    </div>
  </div>

<div class="table-row">
    <div class="column index">3</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

</div>