CSSでスマホとPCで表示を分ける場合の注意

--------------こちらはOK

#mobonly{
        display: none;
}
#pconly{
        display: block;
}
@media screen and (max-width: 768px) {
    #mobonly{
        display: block;
    }
    #pconly{
        display: none;
    }
}

-------------------こちらはNG

@media screen and (max-width: 768px) {
    #mobonly{
        display: block;
    }
    #pconly{
        display: none;
    }
}

#mobonly{
        display: none;
}
#pconly{
        display: block;
}

-----------------------

つまり順番が大事だということ