横並びの表の場合はtableでやるのが一番定番だけど、レスポンシブサイトでワンソースでPCの時とスマホの時で表の段数を変則的に変えたい場合にはflexboxを使えば簡単にできます。

↓要はこんな感じの表組みをブラウザサイズで切り替えたい場合の話

FlexBoxを使ってレイアウト

【HTML】

<ul class="price-flex">
  <li class="kind">
    <ul class="ul01">
      <li class="li01">マッサージ</li>
      <li class="li02">Aコース</li>
      <li class="li03">Bコース</li>
      <li class="li04">Cコース</li>
    </ul>    
  </li>
  <li class="price">
    <ul>
      <li class="li01">45分</li>
      <li class="li02">1,000円</li>
      <li class="li03">2,000円</li>
      <li class="li04">3,000円</li>
    </ul>
    <ul>
      <li class="li01">90分</li>
      <li class="li02">4,000円</li>
      <li class="li03">5,000円</li>
      <li class="li04">6,000円</li>
    </ul>
  </li>
</ul>

【CSS】

ul.price-flex{
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
ul.price-flex ul{
  display: flex;
}
ul.price-flex ul.ul01{
  border-bottom: 0;
}
ul.price-flex ul li{
  flex-grow: 1;
  width: 25%;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  padding: 10px;
}
ul.price-flex ul li:last-child{
  border-right: none;
}
ul.price-flex ul.ul01 li{
  background-color: #ffeaea;
}
ul.price-flex ul.ul01 li.li01{
  background-color: #ff9191;  
}


@media screen and (max-width: 640px) {
  ul.price-flex ul{
    flex-wrap:wrap;
  }
  ul.price-flex ul .li04,
  ul.price-flex ul .li03,
  ul.price-flex ul .li01{
    border-right: none;
  }
  ul.price-flex ul .li04,
  ul.price-flex ul .li01{
    width: 100%;
  }
  ul.price-flex li.price{
  }
}

解説

大元（flexコンテナ）の＜ul＞に「display: flex;」を適用し、横並びのレイアウト
中身（flexアイテム）の＜li＞に「flex-grow: 1;」を指定し伸長係数を等倍にしておきます。

レスポンシブ時に中身（flexアイテム）を折り返し（段落ち）させたいので、大元（flexコンテナ）に「flex-wrap:wrap;」を指定。
最後に横幅いっぱいに表示させたいプロパティをに「 width: 100%;」を指定。

Tableでは再現しづらそうなレイアウトもFlexboxを使えば、比較的に簡単にできちゃいますね。

DEMO