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


and made this javascript

$(window).resize(function() {

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


  } else {

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.

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

display: block
@media (max-width: 1024px) 
        display: none;

display: none
@media (max-width: 640px) 
        display: block;

This really Helped me, is working properly.