.asset-field {
  margin: ($default-spacing / 4) 0;
  width: 100%;
  height: 80px;
}

.asset-field__thumbnail {
  float: left;
  margin: 0 ($default-spacing / 4);
  width: 80px;
  height: 80px;

  > img,
  > a > img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.asset-field__details {
  float: left;
  padding: 0 ($default-spacing / 2);
  width: calc(100% - 80px - (#{$default-spacing / 2}));
  line-height: 80px;
}

.asset-field__title {
  @extend %truncate;
  float: left;
  width: calc(100% - 190px);
}

.asset-field__actions {
  float: right;
  width: 190px;
  text-align: right;
}

.asset-field__action {
  display: inline-block;
  margin-right: $default-spacing;
}

.asset-field {
  margin: ($default-spacing / 4) 0;
  width: 100%;
  height: 80px;
}

.asset-field__thumbnail {
  float: left;
  margin: 0 ($default-spacing / 4);
  width: 80px;
  height: 80px;

  > img,
  > a > img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.asset-field__details {
  float: left;
  padding: 0 ($default-spacing / 2);
  width: calc(100% - 80px - (#{$default-spacing / 2}));

  @include bp-md {
    padding-right: $default-spacing;
    line-height: 80px;
  }
}

.asset-field__title {
  @extend %truncate;
  margin-top: 8px;
  height: $body-line-height;
  line-height: $body-line-height;

  @include bp-md {
    float: left;
    margin-top: 0;
    width: calc(100% - 190px);
    height: auto;
    line-height: 80px;
  }
}

.asset-field__actions {
  width: 190px;

  @include bp-md {
    float: right;
    text-align: right;
  }
}

.asset-field__action {
  display: inline-block;
  margin-right: $default-spacing;
  &:last-child { margin-right: 0; }
}

Improve asset field layout on small breakpoint
Improve asset field layout on small breakpoint
