You can use display:none / display:table next to a simple @media screen and (max-width: 768px) { } rule to show and hide <tr> of the table depending on the width of the screen.
See the example below for a better understanding. Note that the last two% with% is with <tr> , they only appear when the screen is smaller than 768px, while I hide the first diplay:none when the screen is smaller than 768px and only shows when it is bigger than 768px .
EDIT
You need to place these classes within the <tr> of your document and within the <head> tag to work right. I do not know how you are doing there, but this CSS with classes has to be at the beginning of the document as in the example below. I left some comments in the code for you to understand what each type of CSS use is. OBS: everything within the <style> rule should be the last part of your CSS, so roll your .css to the end and put that piece of code there. Any questions just talk
Run the code to understand better and open both with the small screen and in "All page" OBS: I left the border just for you to see better.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link com css externo -->
<link rel="stylesheet" href="style.css">
<!--css interno contruido dento das tags style -->
<style>
.tr-min {
display:none;
}
@media screen and (max-width: 768px) {
.tr-max {
display:none;
}
.tr-min {
display:table;
}
}
</style>
</head>
<body>
<h2 style="color: #ffffff; text-align: center;">NOSSOS DIFERENCIAIS</h2>
<!-- css "inline" escrito direto na tag html no atributo style="" -->
<div style="overflow-y: auto; width: auto;">
<table class="container" style="width: 810; background-color: rgba(0, 0, 0, 0.8);" border="1px" rules="0" cellspacing="0" cellpadding="0"
align="center">
<tbody>
<tr class="tr-max">
<td style="width: 180px; min-width: 70px;">
<strong>
<span style="color: #ffffff;"> Horários flexíveis: </span>
</strong>
<span style="color: #ffffff;"> Professores disponíveis a qualquer horário do dia, de forma a nós ajustar a sua realidade.</span>
</td>
<td style="width: 240px; min-width: 70px;">
<strong>
<span style="color: #ffffff;"> Professores nativos: </span>
</strong>
<span style="color: #ffffff;">Temos uma equipe de professores nascidos e formados na área pedagógica procedentes de vários países
da Espanha.</span>
</td>
<td style="width: 200px; min-width: 70px;">
<strong>
<span style="color: #ffffff;"> Nivelamento Online:</span>
</strong>
<span style="color: #ffffff;"> Teste seu espanhol online. Receberá seus resultados e uma proposta de aula, sem compromisso.</span>
</td>
<td style="width: 170px; min-width: 70px;">
<strong>
<span style="color: #ffffff;"> Sem taxas:</span>
</strong>
<span style="color: #ffffff;"> Não temos contrato fidelidade e não cobramos taxa de matrícula.</span>
</td>
</tr>
<tr class="tr-min">
<td style="width: 50%; min-width: 70px;">
<strong>
<span style="color: #ffffff;"> Horários flexíveis: </span>
</strong>
<span style="color: #ffffff;"> Professores disponíveis a qualquer horário do dia, de forma a nós ajustar a sua realidade.</span>
</td>
<td style="width: 50%; min-width: 70px;">
<strong>
<span style="color: #ffffff;"> Professores nativos: </span>
</strong>
<span style="color: #ffffff;">Temos uma equipe de professores nascidos e formados na área pedagógica procedentes de vários países
da Espanha.</span>
</td>
</tr>
<tr class="tr-min">
<td style="width: 50%; min-width: 70px;">
<strong>
<span style="color: #ffffff;"> Nivelamento Online:</span>
</strong>
<span style="color: #ffffff;"> Teste seu espanhol online. Receberá seus resultados e uma proposta de aula, sem compromisso.</span>
</td>
<td style="width: 50%; min-width: 70px;">
<strong>
<span style="color: #ffffff;"> Sem taxas:</span>
</strong>
<span style="color: #ffffff;"> Não temos contrato fidelidade e não cobramos taxa de matrícula.</span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
