Show-hide divs with css

Question

I have a large section of code that has a number of differences depending on if the view is mobile or desktop. I'm trying to control which section of code displays with the code shown below. Here's my jsfiddle No matter how I adjust the widths, both div's appear. Is this possible or do I need to use javascript?

    <style>
    @media only screen and (max-width: 600px {
     div.is-not-mobile {display:none;}
     div.is-mobile {display:block;}
    }
    @media only screen and (min-width: 600px  {
     div.is-not-mobile {display:block;}
     div.is-mobile {display:none;}
    }
    </style>

    <div class="is-not-mobile">
     <div>This is not a mobile view</div>
    </div>

    <div class="is-mobile">
     <div>This is a mobile view</div>
    </div>

Answer 1

You're missing closing parenthesis ) in (max-width: 600px) and (min-width: 600px).

<style>
    @media only screen and (max-width: 600px) {
     div.is-not-mobile {display:none;}
     div.is-mobile {display:block;}
    }
    @media only screen and (min-width: 600px)  {
     div.is-not-mobile {display:block;}
     div.is-mobile {display:none;}
    }
</style>

    <div class="is-not-mobile">
     <div>This is not a mobile view</div>
    </div>

    <div class="is-mobile">
     <div>This is a mobile view</div>
    </div>