Needing CSS Code for 2 columns in mobile view on a portion of the page (to look consistent with the desktop view)

Site URL: https://www.johnliquoriphoto.com/pricing

Hello,

I have a page on my site that I am happy with in the desktop view, but would like them to appear as two columns in the mobile view rather than one continuous column for a portion of the site so that it looks consistent with the desktop view. The top section and bottom section ("High-End Professional Photos" and "An additional fee may be charged for properties exceeding 25 miles from Marlton, NJ") should just be the one centered column, but I would like the "Add-ons" and "Bundles" sections to be shown as 2 columns in mobile view similar to desktop view. Would anyone be able to help me with some custom CSS code for each of these pages? 

https://www.johnliquoriphoto.com/pricing

This would be super helpful. Thanks in advance!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1647730743245_67250+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
}

@tuanphanThat worked perfectly, thank you!