【CSS】vue-paginateにて画面サイズに応じてページ表示数を変えたい

#vue-paginateにて画面サイズに応じてページ表示数を変えたい

Githubを参考に以下のようにページネーションを実装しました。

ページネーションを１つだけで実装して１２つの投稿を表示しておりましたが、
レスポンシブを行う際にスマホ用600pxに画像を縮小すると当たり前ですが12つの投稿を表示してしまう為、
勝手としては不便だと思い、以下のように「PC・タブレット用ページネーション」と「スマホ用ページネーション」と２つに分けて、画面サイズに応じて[display: none]と[display: flex]を使って表示・非表示をしてみました。

しかし、cssできちんとPC・タブレットの場合はPC・タブレット用ページネーションを優先してスマホ用は非表示、スマホの時はスマホ用ページネーションを優先して、PC・タブレット用は非表示としていますが、何故かスマホ用のページネーションを優先してしまい、投稿が常にページに５つ(スマホ用)になってしまいます。

「PC・タブレット用ページネーション」と「スマホ用ページネーション」を綺麗に分ける方法はありますでしょうか。

分かる方いらっしゃいましたらお力添えを頂きたいです。

もし他に良い方法があればご教示願います。

よろしくお願いいたします。

html
1<template>
2  <div>
3    <Header />
4    <Search v-model="searchWord" />
5    <Post />
6    <div class="post">
7      <h2 id="top" class="post-tll neon">投稿一覧</h2>
8
9
10      <!-- PC・タブレット用ページネーション -->
11      <div class="post-inner paginate-pctb">
12        <div class="post-items">
13          <paginate
14            name="paginate-log"
15            tag="ol"
16            :list="filteredPostData"
17            :per="12"
18            v-if="filteredPostData.length !== 0"
19          >
20            <!-- filteredPostDataにて該当する投稿がある場合、表示。 -->
21            <List
22              v-for="(list, index) in paginated('paginate-log')"
23              :index="index"
24              :list="list"
25              :key="list.id"
26            />
27          </paginate>
28          <div v-else class="nothing">" {{searchWord}} " に該当する投稿はありませんでした。</div>
29          <!-- filteredPostDataにて該当する投稿がない場合、上記を表示させる。 -->
30          <paginate-links
31            for="paginate-log"
32            name="paginate-log"
33            class="pagination flex"
34            v-scroll-to="postTop"
35            :async="true"
36            :show-step-links="true"
37            :style="filteredPostData.length !== 0 == '' ? 'display:none;' : 'display:flex;'"
38          ></paginate-links>
39          <!-- filteredPostDataにて該当する投稿がない場合、非表示。投稿がある場合、表示。 -->
40        </div>
41      </div>
42
43
44      <!-- スマホ用ページネーション -->
45      <div class="post-inner paginate-sp">
46        <div class="post-items">
47          <paginate
48            name="paginate-log"
49            tag="ol"
50            :list="filteredPostData"
51            :per="5"
52            v-if="filteredPostData.length !== 0"
53          >
54            <List
55              v-for="(list, index) in paginated('paginate-log')"
56              :index="index"
57              :list="list"
58              :userDatas="userDatas"
59              :key="list.id"
60            />
61          </paginate>
62          <div v-else class="nothing">" {{searchWord}} " に該当する投稿はありませんでした。</div>
63          <paginate-links
64            for="paginate-log"
65            name="paginate-log"
66            class="pagination flex"
67            v-scroll-to="postTop"
68            :async="true"
69            :show-step-links="true"
70            :style="filteredPostData.length !== 0 == '' ? 'display:none;' : 'display:flex;'"
71          ></paginate-links>
72        </div>
73      </div>
74    </div>
75  </div>
76</template>

css
1.paginate-pctb {
2  @include pc {
3    display: flex ;
4  }
5  @include tab {
6    display: flex ;
7  }
8  @include sp {
9    display: none ;
10  }
11}
12
13.paginate-sp {
14  @include pc {
15    display: none ;
16  }
17  @include tab {
18    display: none ;
19  }
20  @include sp {
21    display: flex ;
22  }
23}