Can't create two columns on Woocommerce checkout page

Question

I've been trying to create a form-row-first and form-row-last layout on my checkout page through the below PHP and CSS. Yet the city, postcode and state fields do not move and remain with the default form-row-wide. Note, I do want to keep the form-row-wide class on the billing_address_1 field.

How can I remove the form-row-wide to create the output I want?

Site: https://oliveandgrain.com.au/checkout

add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields' );
function addBootstrapToCheckoutFields($fields) {
    foreach ($fields as &$fieldset) {
        foreach ($fieldset as &$field) {
            // if you want to add the form-group class around the label and the input
            $field['label_class'][] = 'formLabel textLeft'; 
        }enter code here
    }
    return $fields;
}

function add_classes( $fields ) {

    $fields['billing']['billing_first_name']['class'] = array('form-row', 'form-row', 'form-row-first');
    $fields['billing']['billing_last_name']['class'] = array('form-row', 'form-row', 'form-row-last');
    $fields['billing']['billing_phone']['class'] = array('form-row', 'form-row', 'form-row-first');
    $fields['billing']['billing_email']['class'] = array('form-row', 'form-row', 'form-row-last');
    $fields['billing']['billing_address_1']['class'] = array('form-row', 'form-row', 'form-row-wide');
    $fields['billing']['billing_company']['class'] = array('form-row', 'form-row', 'form-row-first');
    $fields['billing']['billing_city']['class'] = array('form-row', 'form-row', 'form-row-last');
    $fields['billing']['billing_postcode']['class'] = array('form-row', 'form-row', 'form-row-first');
    $fields['billing']['billing_state']['class'] = array('form-row', 'form-row', 'form-row-last');
    $fields['billing']['billing_country']['class'] = array('form-row', 'form-row', 'form-row-last');

    return $fields;
}
add_action( 'woocommerce_checkout_fields', 'add_classes');


function reorder_billing( $checkout_fields ) {
    //Billing
    $checkout_fields['billing']['billing_first_name']['priority'] = 10;
    $checkout_fields['billing']['billing_last_name']['priority'] = 20;
    $checkout_fields['billing']['billing_phone']['priority'] = 30;
    $checkout_fields['billing']['billing_email']['priority'] = 40;
    $checkout_fields['billing']['billing_address_1']['priority'] = 50;
    $checkout_fields['billing']['billing_company']['priority'] = 60;
    $checkout_fields['billing']['billing_city']['priority'] = 70;
    $checkout_fields['billing']['billing_postcode']['priority'] = 80;
    $checkout_fields['billing']['billing_state']['priority'] = 90;
    $checkout_fields['billing']['billing_country']['priority'] = 100;
    
    return $checkout_fields;
} add_filter( 'woocommerce_checkout_fields', 'reorder_billing');



function custom_override_default_locale_fields( $fields ) {
    $fields['postcode']['priority'] = 90;
    $fields['state']['priority'] = 100;
    return $fields;
} add_filter( 'woocommerce_default_address_fields', 'custom_override_default_locale_fields' );



    

.woocommerce .woocommerce-checkout .col2-set .col-1 {
      float: none;
      width: 100%;
    }

    .woocommerce form .form-row {
      margin-right: 4%;
      float: left;
      width: 48%;
    }

    .woocommerce form .form-row-last {
      margin-right: 0;
    }

    @media (max-width: 980px) {
      .checkout .form-row {
        float: none !important;
        width: 100% !important;
      }
    }

Answer 1

The docs state that in specific cases the address fields need to be passed to woocommerce_default_address_fieldsfilter. By changing the statements, I was able to achieve the layout I needed.

Ref: https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

function add_classes( $fields ) {

    $fields['billing']['billing_phone']['class'] = array('form-row', 'form-row', 'form-row-first');
    $fields['billing']['billing_email']['class'] = array('form-row', 'form-row', 'form-row-last');
    
    return $fields;
} add_filter( 'woocommerce_checkout_fields', 'add_classes');


function add_classes_two( $address_fields ) {

    $address_fields['first_name']['class'] = array('form-row', 'form-row', 'form-row-first');
    $address_fields['last_name']['class'] = array('form-row', 'form-row', 'form-row-last');
    $address_fields['city']['class'] = array('form-row', 'form-row', 'form-row-first');
    $address_fields['postcode']['class'] = array('form-row', 'form-row', 'form-row-last');
    $address_fields['state']['class'] = array('form-row', 'form-row', 'form-row-first');
    $address_fields['country']['class'] = array('form-row', 'form-row', 'form-row-last');

    return $address_fields;
} add_filter( 'woocommerce_default_address_fields', 'add_classes_two');