I've been utilizing the CSS media rules to only apply my inline field settings dynamically based on the size of the display and that seemed to do the trick on a form I recently launched.

In the example below, the any display larger than 600px or more gets the inline styles, and anything smaller gets different settings, including making the form title smaller and hiding the form border and page background.

@media (min-width:600px){
  .smallField,
  .mediumField,
  .largeField {
    display:inline-block;
    vertical-align: top;
  }

  .smallField {
    width:25% !important;
  }

  .mediumField {
    width: 37.5% !important;
  }

  .largeField {
    width: 50% !important;
  }
}

@media (max-width:600px){
  body {
    background-image: none !important;
  }
  
  .cf-formwrap {
    box-shadow: none !important;
  }
  
  .smallField,
  .mediumField,
  .largeField {
    width: 100% !important;
  }
  
  #form-logo {
      width: 40px !important;
      margin-right: 18px !important;
  }

  #form-title-wrap {
      padding-left: 58px !important;
  }

  #form-title-wrap label {
      font-size: 10px !important;
  }

  #form-title-wrap h1 {
      font-size: 14px !important;
      line-height: 25px !important;
      min-height: 25px !important;
  }
}

Things will be a bit different depending on whether you're using left labels, top labels, etc., but this should give you a general idea.

Chrome and the new version of Edge also have pretty good mobile emulation for testing if you right-click, inspect, then enable the device toolbar.