Media Quesies css

[hell hansen]

Hi Guys i need help with media queries.
I have 2 divs with class div :

 class1="flags-desktop" and class2="flags-mobile"

in my website!
one for mobile and one for desktop or normal screen big then 1000px.
So for default the div class1="flags-desktop" is showing and class2 is hide. with css d

display:none

and made this javascript

<script>
$(window).resize(function() {

  if ($(this).width() < 1024) {

    $('.flags-desktop').hide();
    $('.flags-mobile').show();

  } else {
    $('.flags-desktop').show();
    }
});
</script>

This working, but not the way i wanted, because if i refresh the page, on mobile, i get the class for desktop, and the some happen if the javascript is not enabled on the user device.

So i wish to do it with native css using media queries.
So i hope you guys give some help.

[hell hansen]

Hi Guys i solved it!
if in future someone getting some problem,
just use media queries something like that!

.mydiv1{
display: block
}
@media (max-width: 1024px) 
{
    .mydiv1
    {
        display: none;
    }
}

.mydiv2{
display: none
}
@media (max-width: 640px) 
{
    .mydiv2
    {
        display: block;
    }
}

This really Helped me, is working properly.