How to change form formatting only for mobile devices?

Hello... I've gotten myself all confused and turned around in trying to figure out what settings my form should have in order to accomplish the following:

I have two drop downs. When on a desktop I want the drop downs to be side by side in two columns but on a mobile I would like them to be in a single column. 

Can y'all help me with this.  I've got the field set to "shrink", I've got CSS on both dropdown fields, I've got a mobile responsive widget, I've got make form responsive checked off and Enable Form Columns selected.

I'm sure it's a simple thing but I've tried all sorts of varied configurations and CSS in order to get the desired outcome but I'm clueless now.

Thanks in advance for the help.

Hello,

I've cloned your form named "Clone of LandingPgQuote" on my side in order to test it on mobile. As far as I check on iPhone 6, the drop down lists look side by side as you can see the screenshot below:

In order to make them appear on the same line on mobile devices, you need to inject CSS media queries to the form. I have injected the following CSS codes to the form in order to make the drop-down lists appear on single lines as you can see in the following screenshot below:

@media only screen and (max-width: 480px) {

    .form-col-1 {

        background-color: lightgreen;

      width: 100% !important;

    }

  .form-col-2{

        width: 100% !important;

  }

}

Please try this and if you need further assistance, let us know. We will glad to be helpful.

Thanks.

Thank you for clarifying your concern, we appreciate it.

Please add the following CSS codes instead and test your form again both in mobile and desktop view.

@media (max-width: 480px) {

    #id_4, #id_237 {

        width: 100% !important;

    }

}

I hope this will help you with what you're trying to achieve, If, in any case, you have other questions regarding this, please do not hesitate to let us know.

Thank you.