WooCommerce Reorder checkout fields with CSS

woo-reorder-checkout-fields.css

.woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	row-gap: 1em;
	column-gap: 1em;
}

.woocommerce-billing-fields__field-wrapper > .form-row {
	width: auto;
}

#billing_email_field { order: 1; }
#billing_phone_field { order: 2; }
#billing_last_name_field { order: 3; }
#billing_first_name_field { order: 4; }
#billing_country_field { order: 5; }
#billing_state_field { order: 6; }
#billing_city_field { order: 7; }
#billing_postcode_field { order: 8; }
#billing_address_1_field { order: 9; grid-column: span 2;}
#billing_company_field { order: 10; grid-column: span 2;}