Since I can’t comment yet I’ll respond this way.
CSS grid is pure CSS and also by far the easiest way to solve your problem.

Only other way would be either bootstrap, which you excluded, or an incredible unnecessary amount of work with flexbox.

I have a simple app with a simple table with four columns and I need to have a responsive table where each column will be below the other but I don’t know how to do it. I hope that there is some answer without using Javascript.

Now I have a table like this:

+---------------+
| Some text     |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+

And I need to get this result in smaller resolution:

 | A | B | C | D |

+---+---+-
| A | B |
+---+---+
| A | B |
+---+---+
| A | B |
+---+---+
| C | D |
+---+---+
| C | D |
+---+---+
| C | D |
+---+---+

And so on. Is it somehow possible? Here is my JSfiddle. Also the answer in jsfiddle would be best.

Here is HTML

<table>
    <tbody>
        <tr>
            <td style="text-align: center; font-size: 14px;" colspan="4">Some title</td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #e8e8e8;">&nbsp;<span style="color: #1e2a64;"><strong>Title</strong></span>

            </td>
            <td style="text-align: center; background-color: #dedcdd;"><strong>&nbsp;<span style="color: #1e2a64;">Title2</span></strong>

            </td>
            <td style="text-align: center; background-color: #d5d3d4;"><strong>&nbsp;<span style="color: #1e2a64;">Title3</span></strong>

            </td>
            <td style="text-align: center; background-color: #e0f0cb;"><strong>&nbsp;<span style="color: #5ca402;">Title4</span></strong>

            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">
                <div class="circle"><strong>&nbsp;1.500</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
            <td style="text-align: center; background-color: #efedee;">
                <div class="circle"><strong>40.000</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
            <td style="text-align: center; background-color: #e7e5e6;">
                <div class="circle"><strong>&nbsp;700</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
            <td style="text-align: center; background-color: #f0fae2;">
                <div class="circle-free">
                    <p class="hidden_paragraph">hidden</p>
                    <p style="padding-left: 10px;">0 <sup>eur</sup>

                    </p>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
            </td>
            <td style="text-align: center; background-color: #efedee;">&nbsp;&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
            </td>
            <td style="text-align: center; background-color: #e7e5e6;">&nbsp;&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
            </td>
            <td style="text-align: center; background-color: #f0fae2;">&nbsp;&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
            </td>
        </tr>
        <tr style="height: 70px;">
            <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
            <td style="text-align: center; background-color: #efedee; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
            <td style="text-align: center; background-color: #e7e5e6; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
            <td style="text-align: center; background-color: #f0fae2; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
        </tr>
    </tbody>
</table>

CSS

@media all and (max-width:768px){

  tr{
    display: inline;
    float:left;
}

td{
   display: block;
}
}

Note: No Bootstrap