CSS for dev and build/production are different. Production CSS not as expected.

[jtlindsey]

Module version @nuxtjs/[email protected]

Describe the bug dev CSS and production build are different. For example the following code renders side by side in dev and one on top of the other in production. For reproduction I'm only using built in css classes.

<template>
  <v-row>
    <v-col cols="12">
      <v-row>
        <v-img
          class="col-12 col-md-6"
          max-height="250px"
          src="https://images.unsplash.com/photo-1518895949257-7621c3c786d7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=688&q=80"
        ></v-img> 

        <v-col class="col-12 col-md-6">
          <div>Post Title Example</div>
        </v-col>
      </v-row>
    </v-col>

  </v-row>
</template>

I'm trying to show one column on top of the other for small screens and side by side on large screen. But dev and production don't render the same. Tested on same machine, 2 different browsers (chrome, safari) same screen size.

To Reproduce https://github.com/jtlindsey/vuetifynuxtbuildissue1

Steps to reproduce the behavior:

1. Run in dev mode and visit localhost:3000
2. Run build and start and visit localhost:3000
3. See difference

Expected behavior Production should match Development

Screenshots If applicable, add screenshots to help explain your problem. Production on full screen

Dev full screen

Additional context I also made a branch called withoutnuxt and see the same problem in a non-nuxt vuetify app. Do you have any ideas to get around this?