Customize WooCommerce Checkout Fields and Columns - php

Question

I'm using WPExplorer's Total theme: You should be able to click this sentence to open the Total Theme from WPExplorer. You'll need to add something to your cart and get to the checkout page for the rest of this... I've asked the theme author for some help, but apparently, this is a WooCommerce issue.
Ok, fine. So I crack open my TeamTreeHouse account and go through as much as I can possibly find. No luck.
Now if you have the theme opened up, you'll see that the default checkout page puts ALL of the woocommerce_checkout_billing fields on the left and then all of the woocommerce_checkout_shipping fields on the right.
Now, if your store has almost no products that require shipping like virtual products and downloadable products, then there's a problem:
The checkout page is INCREDIBLY lopsided. There are tons of fields running down the left of the page and almost never any fields on the right-hand side of the page. What I'm attempting to do is make the checkout_billing fields be one left, one right, (new line), next one left, next one right, (new line), left then right again, then (if needed) display the "Ship to A Different Address" toggle appears. And then IF and only when the additional woocommerce_checkout_shipping fields are needed they again appear left, right, (new line) left then right, (new line) left & right.
The end result is that the checkout page has SYMMETRY on the forms instead of all being down the left side
The file from Woo that controls the checkout page is https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php#L33 and starting at line 33 we see this:
<div class="col2-set" id="customer_details">
<div class="col-1">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
</div>
<div class="col-2">
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
What do I need to change to simply make the fields appear 1 left, 1 right, new line, 1 left, 1 right, on and on for the checkout_billing, then again in the checkout_shipping 1 left, 1 right, new line, on and on and on?
Thanks!

Answer 1

This seems more like a pure CSS question to me. Something like the following would be a start (assuming I understood what you were describing) and could be further customized. Use your browser's developer tools to inspect the elements and live-test their style rules.
First, we remove the 2 main columns. Then, we split the inputs into columns. Note, this doesn't include any responsive layouts.
.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;
}

Answer 2

#helgatheviking provides a good answer, but this will change the row elements throughout the whole site.
Use the .page-id class with the checkout page ID to prevent issues with other pages that use the .woocommerce row classes.
.page-id-yourpageid .woocommerce .woocommerce-checkout .col2-set .col-1 {
float: none;
width: 100%;
}
.page-id-yourpageid .woocommerce form .form-row {
margin-right: 4%;
float: left;
width: 48%;
}
.page-id-yourpageid .woocommerce form .form-row-last {
margin-right: 0;
}