Woocommerce checkout from 2 columns to 1 column on mobile

Hi!

I've modified my checkout page with the css underneath to get the shipping address and billing address into two separate columns. It works well but now it shows two columns also on mobile. How can I get to show only one column on mobile devices?

.woocommerce-checkout .col2-set .col-2 {
float: right;
width: 48%;
}

.woocommerce-checkout .col2-set .col-1 {
float: left;
width: 48%;
}

#customer_details+#wc_checkout_add_ons,
#order_review,
#order_review_heading,
.woocommerce-checkout .col2-set {
width: 100%;
float: none;
margin-right: 0;
}