How can I make the table become one column, four rows when viewed from mobile?

Question

css

Good evening!
Help, please, there is a table with phone numbers on the Contacts page .
Table HTML code:

<table class="phones">
<tbody>
<tr>
<td class="number"><img src="http://www.alkonarkostop.com.ua/wp-content/uploads/2017/01/vodafone.gif" alt="Vodafone"><a href="tel:[phone]">(099) 71-71-541</a></td>
<td class="number"><img src="http://www.alkonarkostop.com.ua/wp-content/uploads/2017/01/vodafone.gif" alt="Vodafone"><a href="tel:[phone]">[phone]</a></td>
</tr>
<tr>
<td class="number"><img src="http://www.alkonarkostop.com.ua/wp-content/uploads/2017/01/kyivstar.jpg" alt="Киевстар"><a href="tel:[phone]">[phone]</a></td>
<td class="number"><img src="http://www.alkonarkostop.com.ua/wp-content/uploads/2017/01/lifecell.png" alt="Lifecell"><a href="tel:[phone]">(063) 24-45-300</a></td>
</tr>
</tbody>
</table>

I am using media queries like this for this table:

@media screen and (max-width: 50em) {
    .string{
        font-size:2.5em;
    }
    .number a{
    	font-size:1.5em;
    }
}
 
@media screen and (max-width: 40em) {
    .string{
        font-size:2em;
    }
    .number a{
    	font-size:1em;
    }
}
 
@media screen and (max-width: 30em) {
    .string{
        font-size:1.5em;
    }
    .number a{
    	font-size:0.5em;
    }
}

How can I make the table become one column, four rows? So that phones go under each other when viewed on mobile devices.

Answer 1

add to media query with desired resolution:
td.number {
display: block;
}