スマホ版のメインページデザインを、左にサムネイルで右側にタイトルとカテゴリみたいにしたい

mobile.cssにこのように書けばOKではないかと思います。

.entry .entry-thumb, .related-entry-thumb {
    float: left !important;
    margin: 10px !important;
}

!importantを使いたくない場合は、書き込む位置や、CSSセレクタを工夫してみる必要があります。

ウィジェット部分（人気記事など）をモバイルでみた場合に表示される形式（画像＋タイトルなど）ですっきり表示するにはどうすればよいでしょうか？

すっきり表示するという説明だけでは、ざっくりとしすぎていてどのように表示していいのかわからないです。
もう少し具体的にお願いします。

>りんごさん
サムネイルのサイズを変更するには以下のようにします。

.entry-thumb img{
	width: 200px;
	height: 200px;
}

抜粋表示は以下のようにすればいいかと思います。

.entry .entry-snippet{
	display: block;
}

変更がうまくいかない場合は、CSSセレクタを足すか!importantを足してください。

あと、モバイルだけのデザインを変えるのがうまくいきません。style.cssから何をコピーして使ったらいいのでしょうか。

この質問だけでは、変更対象がわからないので、何をしたいかがわからないです。
モバイルだけの何のデザインを変更したいのでしょうか？

!importantの場所がおかしいです。
修正してもう一度試してみてください。

後半ですが、PCとスマホでデザインを変更したいときの方法です。これまでwptouchを使っていたので、レスポンシブのカスタマイズがよくわかりません。スマホデザインだけをカスタムする場合はどうしたらいいですか？

スマホだけのデザインを変更したいときは、mobile.cssに記入すればOKです。

サイズによって変更するには以下のように書く必要があります。

/************************************
** 解像度639px以下のスタイル
************************************/
@media screen and (max-width:639px){
  ...
}

デフォルトでその状態なので、特に変更する必要はないと思うんですが、とくさんのサイトは何か違った表示なんでしょうか。

それだったらこんな感じでいけるのではないかと思います。
（※動作確認はしていません。）

.entry .entry-thumb, .related-entry-thumb {
    float: left !important;
    margin: 10px !important;
}

.entry .post-meta,
.entry .entry-snippet,
.entry .entry-read{
  display:none !important;
}