Bootstrap table: is it possible to make two rows table become two columns table on mobile friendly?

I'm trying to make a two rows table into two columns table on mobile view. I'm attaching the example of what i'm trying to achieve:

This is the table how it looks on desktop view:

This is how it should look on mobile screen:

But what I'm managing to achieve is only this:

This is the view on mobile

I'm attaching the code:

HTML:

<html>
    <table class="col-sm-12 table-bordered table-striped table-condensed cf mt-5" id="table2">
        <thead class="cf">
            <tr style="width:100px;">
                <th>Registo CTT</th>
                <th>Comission1  </th>
                <th>Comission2</th>
                <th>Comission3</th>
                <th>Comission4</th>
                <th>Comission5</th>
                <th>Comission6</th>
            </tr>
            <tr style="width:100px;">
                <td>Comissão</td>
                <td>€ 0.00</td>
                <td>€ 0.00</td>
                <td>€ 0.00</td>
                <td>€ 0.00</td>
                <td>€ 0.00</td>
                <td>€ 0.00</td>
            </tr>
        </thead>
    </table>
</html>

CSS:

@media(max-width: 600px) {
    #table2 td {
        display: table-row;
    }
    #table2 th {
        display: table-row;
    }
    #table2 > tr {
        display: inline-block !important;
        width: 20px !important;
    }
}

Maybe anyone has advice how i could improve this so it would look as I want? Thanks!