responsive-tabs.css

/* CSS for responsive product tabs in WooCommerce. See my blog post here: https://www.timrosswebdevelopment.com/responsive-product-data-tabs-woocommerce */
/* For small screens only */
@media screen and (max-width: 767px) {
    .woocommerce-tabs.woocommerce-tabs-responsive ul li {
        /* this rule needs to be important to override the default woocommerce style */
        display: flex !important;
        flex-direction: column;
        width: 100%;
    }

    .woocommerce-tabs.woocommerce-tabs-responsive .woocommerce-Tabs-panel {
        /* this rule needs to be important to override the default woocommerce style */ 
        display: none !important;
    }

    .woocommerce-Tabs-accordion-content {
        display: none;
    }
    .woocommerce-tabs.woocommerce-tabs-responsive ul li.active .woocommerce-Tabs-accordion-content {
        display: block;
    }
}

/* On larger screens make sure the accordion does not show. */
@media screen and (min-width: 768px) {
    .woocommerce-Tabs-accordion-content {
        display: none !important;
    }

    .woocommerce-tabs.woocommerce-tabs-responsive ul li {
        display: inline-flex;
        width: auto;
    }
}