Колонка Woocommerce не работает

Question

У меня проблемы с этой скрипкой: https://jsfiddle.net/candoh/b6os92q3/13/# & Togetherjs = SK1MHa4Bv8

<div class="woocommerce-gzdp-checkout-verify-data">
    <div class="col3-set addresses">
        <div class="col-1">
            <header class="title multistepcheckout">
                    <h4>Rechnungsdetails</h4>
                    <a href="#step-address" class="edit step-trigger" data-href="address">
                        <i class="fa fa-edit"></i>
                    </a>
            </header>
            <address>
                Firma<br>Vorname Nachname<br>Straße + Hausnummer<br>PLZ + Ort<br> Mail
            </address>

            <header class="title multistepcheckout">
                <h4>Lieferadresse</h4>
                <a href="#step-address" class="edit step-trigger" data-href="address">
                    <i class="fa fa-edit"></i>
                </a>
            </header>
            <address>
                Entspricht der Rechnungsadresse
            </address>

        </div><!-- /.col-1 -->
        <div class="col-2">
                <header class="title multistepcheckout">
                    <h4>Zahlungsart</h4>                
                    <a href="#step-payment" class="edit step-trigger" data-href="payment">
                        <i class="fa fa-edit"></i>
                    </a>
                </header>
                <p class="wc-gzdp-payment-gateway">Rechnung (Firmen mit Ust.-ID)</p>
        </div><!-- /.col-2 -->
<div class="col-3">
        </div >     
    </div><!-- /.col3-set -->
</div>

.col3-set {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
    }
.col3-set .col-1, .col3-set .col-2, .col3-set .col-3 {
    flex: 1 0 auto;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
    max-width: 30%;
    }
.col2-set {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
    }
.col2-set .col-1, .col2-set .col-2 {
    flex: 1 0 50%;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
    max-width: 50%;
    }

Я использую его для магазина w c. Проблема в том, что я получил «набор col3», который должен включать 3 контейнера рядом с шириной 30% каждый, которые должны выровняться в ряд на рабочем столе и в столбце на мобильном телефоне. К сожалению, по какой-то причине это не работает. Столбцы перекрываются, когда я перехожу на мобильный.

Но если я изменяю его на исходный 'col2-set', который является предопределенным классом от woocommerce, с шириной 50% он работает по любой причине. Кто-нибудь может увидеть мою ошибку и объяснить ее мне?