Reorganizing a shop page to show sidebar on bottom on mobile

Hello,

I want to have the left sidebar on a shop page display at the bottom in mobile view. This code from GitHub seems to do the trick, but its always on. I removed it for now, anyway to display this on mobile only?

#
# wrap single product image in an extra div
#
add_action( ‘woocommerce_before_single_product_summary’, ‘avia_add_image_div’, 2);
add_action( ‘woocommerce_before_single_product_summary’, ‘avia_close_image_div’, 20);
function avia_add_image_div()
{
echo “<div class=’four units single-product-main-image alpha’>”;
}

function avia_close_image_div()
{
global $avia_config;
$avia_config[‘currently_viewing’] = “shop_single”;

echo “</div>”;
}

#
# wrap single product summary in an extra div
#
add_action( ‘woocommerce_before_single_product_summary’, ‘avia_add_summary_div’, 25);
add_action( ‘woocommerce_after_single_product_summary’, ‘avia_close_summary_div’, 3);
function avia_add_summary_div()
{
echo “<div class=’five units single-product-summary’>”;
}

function avia_close_summary_div()
{
echo “</div>”; //close out the summary
echo “<div class=’three units single-product-sidebar’>”;
get_sidebar();
echo “</div>”;
}

Thank you!
Chris