Таблица для мобильной версии

Как реализовать такую таблицу, как на рисунке 2, для мобильной версии?

<table id="comparative_table">
        <thead>
            <tr>
                <th style="border: none;"></th>
                <th>A1</th>
                <th>B2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td thead-title="A1">✘</td>
                <td thead-title="B2">✔</td>
            </tr>
            <tr>
                <th>2</th>
                <td thead-title="A1">12:00-18:00</td>
                <td thead-title="B2">Да</td>
            </tr>
            <tr>
                <th>3</th>
                <td thead-title="A1">18:00-23:00</td>
                <td thead-title="B2">Да</td>
            </tr>
            <tr>
                <th>4</th>
                <td thead-title="A1">1:00-6:00</td>
                <td thead-title="B2">Нет</td>
            </tr>
        </tbody>
    </table>

table{width: 100%; font-size:26pt; border-collapse: collapse; border: 0px;}
    table thead {display: none;}
    table tbody tr th {display: block; font-weight:500;font-size:30pt;}
    table tr th, table tr td {border: none;border-bottom: 1px solid #111111;} 
    table td {display: block;}
    table td:before {content: attr(data-label);float: left; font-weight:400;}
    table tbody tr th {text-align: center;}
    table tbody tr td {text-align: right;}