サンプルコード

サンプルデモはこちら

 HTML

<dl class="responsive-image-table">
<dt>一つ目</dt>
<dd class="with-img">
<div class="text-section">こちらにはコンテンツが入ります。</div>
<div class="img-section">
<img src="img/img-640x480.gif" alt="image">
</div>
</dd>
<dt>二つ目</dt>
<dd class="with-img">
<div class="text-section">こちらにはコンテンツが入ります。</div>
<div class="img-section">
<img src="img/img-640x480.gif" alt="image">
</div>
</dd>
<dt>四つ目</dt>
<dd>画像が無い場合。こちらにはコンテンツが入ります。</dd>
<dt>五つ目</dt>
<dd class="with-img">
<div class="text-section">こちらにはコンテンツが入ります。</div>
<div class="img-section">
<img src="img/img-640x480.gif" alt="image">
</div>
</dd>
<dt>六つ目</dt>
<dd>画像が無い場合。こちらにはコンテンツが入ります。</dd>
</dl>

SASS

/*---------------------------------------------
  General Settings
  ---------------------------------------------*/
$sm-size: 480px;
$tablet-size: 768px;

img {
  width: 100%;
  vertical-align: bottom;
}

/*---------------------------------------------
  Responsive Image Table
  ---------------------------------------------*/
$border-common: 1px solid rgba(#c9c9c9, 1);

.responsive-image-table {
  border-right: $border-common;
  border-bottom: $border-common;
  @media (min-width: $tablet-size) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  dt,
  dd {
    box-sizing: border-box;
    border-top: $border-common;
    border-left: $border-common;
    padding: 10px 1em;
  }
  dt {
    background: rgba(#eeeeee, 1);
    @media (min-width: $tablet-size) {
      width: 20%;
    }
  }
  dd {
    margin: 0;
    @media (min-width: $sm-size) {
      &.with-img {
        display: -ms-flexbox;
        display: flex;
      }
    }
    @media (min-width: $tablet-size) {
      width: 80%;
    }
  }
  .img-section {
    padding: 1em 0;
    @media (min-width: $sm-size) {
      padding: 0 1em;
    }
  }
}