スマホとPCのエントリーのデザインを分けたい

テンプレートやらを読み込む方法はわいひらさんとかがまた答えてくれるだろうと思いますが、jQueryでやる方法としては以下のサンプルのような感じです。

サンプル: PCとモバイルで表示を変える | codepen
※モバイルの方は完全に再現してません。PCのエントリーのスタイルをそのまま持っていってるのでさてどうなることかは不明です。
※ cssはscssで書いてますのでcss欄の下向き三角からview compiledでcssに変換したものをご利用ください

どういうことをしているかといいますと、カスタマイザーの設定は、デフォルトのリストです。なのでおそらくはモバイル時には勝手にモバイルの表示になるだろうと思うんですが、どうなるかは試してないのでわかりません。

デフォルトのリストをPCの時にはサムネイル大の時のcssに部分的に変換しておいて、モバイルの時にはbodyタグに.mobileと言うクラスを入れ、.mobileの子要素に対してスタイルを行っています。

つまり、仮のcssですが、本来であれば、

#list .entry {
  border: 1px solid red;
}

このようにスタイルされる所を、モバイル時にはbodyタグに.mobileと入るので、

.mobile #list .entry {
  border: 1px solid blue;
}

このようにすることでPCの時はリストの各エントリーに赤のボーダー、モバイルの時は青のボーダーが入るようにできると言うことです。
bodyタグにmobileと言うクラスが入るので、モバイルで表示するページ内は全て、

.mobile なんちゃらセレクタ {
  プロパティ: 値;
}

と言う感じでスタイルできます。また.mobileと言うクラスから始まるセレクタの指定は他にないために重複しないことから、テーマデフォルトのスタイル以外に独自のスタイルを当てることもできます。

.mobileを挿入する条件は端末のユーザーエージェントで調べているために、実機で見てみないとその違いがわからないと思います。chromeのデベロッパーツールで携帯エミュレーションがあるので、それでも確認できます。PCとスマホやらでどう見えるかを確認してみてください。

またその際に、サンプルのアドレスの/pen/の部分を/full/に変えればhtml、css、jsの欄がないページが見れますので、それでどのような挙動となるかを確認してみてください。
PCとモバイルで表示を変える(fullページビュー) | codepen

切り替え自体はこれで出来るので、後はcssを適度にお好きなようにいじれば良いだけです。

theme_mod_list_styleをフィルタするとよさそうです。
子テーマのfunctions.phpなどにコードを記述します（PHP5.3以上必須）

add_filter('theme_mod_list_style', function(){
	return is_mobile() ? 'cards' : 'large_thumb';
});

mobileのときはエントリーカード表示（cards）、その他のときは大きなサムネイル表示（large_thumb）になります。
large_cards（大きなエントリーカード表示）
large_card_just_for_first（最初だけを大きなエントリーカード表示）
bodies（本文表示）
などに変更すれば、指定したものになります。
指定できるものはlib/customizer.phpでget_list_styleを検索すると見つかります。