user listing

by djp3d

HTML

<div class="Rtable Rtable--4cols Rtable--collapse">

  <div class="Rtable-cell Rtable-cell--head"><img src="http://recovery360.wm-staging.co.uk/images/profile_80.png" /></div>
  <div class="Rtable-cell Rtable-cell--body">David Penney<br>Some ther text</div>
  <div class="Rtable-cell Rtable-cell--foot"><a class="btn btn-success" href="/Members/ResetPassword/cdd29743-80b0-4ad1-90cd-290782e7f178">Reset Password</a></div>

</div>

<div class="Rtable Rtable--4cols Rtable--collapse">

  <div class="Rtable-cell Rtable-cell--head"><img src="http://recovery360.wm-staging.co.uk/images/profile_80.png" /></div>
  <div class="Rtable-cell Rtable-cell--body">David Penney<br>Some ther text</div>
  <div class="Rtable-cell Rtable-cell--foot"><a class="btn btn-success" href="/Members/ResetPassword/cdd29743-80b0-4ad1-90cd-290782e7f178">Reset Password</a></div>

</div>

CSS

.Rtable--collapse {
    border: 1px solid rgba(168, 168, 168, 0.25);
    padding: 10px;
    align-items: center;
}
.Rtable {
    position: relative;
    top: 3px;
    left: 3px;
}
.Rtable {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 3em 0;
    padding: 0;
}

.Rtable-cell {
    border: none;
    padding: 0px !important;
    margin: 0px !important;
}
.Rtable-cell {
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    padding: 0.8em 1.2em;
    overflow: hidden;
    list-style: none;
    border: solid 3px white;
    background: rgba(112, 128, 144, 0.2);
}

.Rtable--4cols > .Rtable-cell {
    width: 33%;
}

.Rtable--collapse .Rtable-cell--head {
    width: 80px !important;
    flex-grow: 0;
}

.Rtable-cell--body {
    padding: 10px !important;
}

.Rtable--collapse .Rtable-cell--foot {
    width: 150px !important;
    flex-grow: 0;
}

@media (max-width: 500px) {
  .Rtable--collapse {
      display: flex;
  }

.Rtable--collapse .Rtable-cell--foot {
    width: 100% !important;
    flex-grow: 0;
}
 .Rtable--collapse .Rtable-cell {
    display: inline-flex;
    flex-grow: 1;
  }
    .Rtable--collapse .Rtable-cell--head {
      flex-grow: 0;
    width: 80px !important;
  }


  
}