Is there any way to make this type of code as responsive?

```
<table class="resp-table">
  <tbody>
    <tr>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
    </tr>
  </tbody>
</table> 

```

Currently it displays as:

```
COL1|COL2|..|COL7

```

And if possible I want to show it this way always if possible.

But if its mobile screen/small screen i want to display it row by row:

```
COL1 
COL2
.. 
COL 7

```

is it achievable with CSS only?