関連記事をpc版、スマホ版で分けたい！

アイテムが少ないのを増やすためにはPHPをいじらないといけませんが、多いのを減らすのはcssだけでもできます。

例えばのサンプル: ulのliの3つ目以降を非表示 | jsFiddle

これが関連記事に適用できるかどうかはアイデア次第です。

ちなみに、スマホを判断するのは画面サイズと、ユーザーエージェントを調べる方法があって、モバイルではなくスマホと限定ならば、大体の所、

@media screen and (max-width: 48em){
  //該当のセレクタとそのプロパティ {...略...}
}

※ 48em = 768px

768pxというのは、iphone6plusを横向きにした時ぐらいの横幅です。縦幅だけを考慮するなら(横向きは考慮しない)、30em(480px)でも良いだろうと思います。
768px以上になるとタブレットとの境界になるのと#mainの幅を超えているのでPC表示で良いだろうと思います。

hidekichiさん、返信ありがとうございます。

アドバイスは大変嬉しいのですが、具体的にcssにどのように書き込めばいいのでしょうか？

cssに関しては初心者なのでまだコードの作り方などはよく分かってないです。

ほぼまんま当てはめるだけなのですが、サンプルではサムネイル表示のhtmlがなかったので、デフォルトの表示のままでしてあります。原理は同じです。

サンプル: 関連記事をスマホのときだけ任意の数にする | codepen

サンプルではリサイズは考慮してませんが、ソースとリザルト画面の境界を動かして480px以下の幅になればメディアクエリが動作して10個表示してある(だろうと思う)関連記事が3つになるかと思います。

他の方法として、いったん全部display: none;した後、3つ目までをそれぞれdisplay: blockしてもよいです。表示する数が少ないのでできる技です。表示する数が多くなると最初に書くのも面倒ですし、また修正するときも面倒です。

.test その子要素 {
  display: block;
}

.test その子要素:nth-child(1),
.test その子要素:nth-child(2)
.test その子要素:nth-child(3) {
  display: block;
}

おまけとしてjQueryでやるのも書いておきました。完全レスポンシブの状態(on|offいずれか)で使い分けしてください。
jQueryでやる場合は.hideというクラスだけ必要です。メディアクエリは必要ありません。そもそもcssでできるのでjQueryでやるメリットは少ないですが、例えば.hideでアニメーション付きで消すとか、縮小して消す、あるいは完全レスポンシブがonの方ならシームレスにリサイズに対応しているので、画面幅が大きくなれば消えていたアイテムを拡大して表示することもできます。
(ただしjQueryはやっつけで書いたので、もっとうまい方法や簡単にかける方法があるかもしれないと思います。こんなのもできますよという例です)

こういうのは、cssのアイデア次第ですので汎用性が高いのはjQueryかと思いますが、簡単に実装できるメディアクエリを使うほうが良いだろうと思います。

.test その子要素:nth-child(1),
.test その子要素:nth-child(2),
.test その子要素:nth-child(3) {
  display: block;
}

,が抜けてました。正しくは上記

hidekichiさん、ありがとうございます！

教えられた方法で試してみます。