Как сделать до 576px мобильную версию, а после 576 pc?

Как вариант из w3schools:

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Либо использовать готовые вещи, например bootstrap, где все уже давно продумано.

function checkWidth() { 
    var windowSize = $(window).width(); 
    if (windowSize > 576) { 
document.querySelector("meta[name=viewport]").setAttribute("content", "width=1920, initial-scale=0,maximum-scale=0"); 
    }  else { 
document.querySelector("meta[name=viewport]").setAttribute("content", "width=device-width,  initial-scale=0"); 
    } 
    } 
    checkWidth(); 
    $(window).resize(checkWidth);