bootstrap4 でスマホの時だけ、テキストを中央寄せにした

Question

Bootstrap4でコンテンツを作成しているのですが
PCのときはテキストを左寄せにして、
スマホ、タブレットの時は、中央寄せにしたいと思っています。
このような事は、一つのブロックのみで実現できるでしょうか？
同じ内容を２つ用意して一つは「スマホ、タブレット用」「PC以上用」というふうにして、表示、非表示で対応すべきなのでしょうか？

いろいろ調べたのですが。
解決方法が分からず困っています。
よろしくお願いいたします。

     <div class="col-12 col-md-6" id="copy-part">
        <div class="">
          <p class="">Catch Copy</p>
          <h2 class="">XXXXXXXXとは？</h2>
        </div>
        <p class="">
          XXXXXXXXXXXXXXX<br />
          XXXXXXXXXXXXXXXX、<br />
          XXXXXXXXXXXXXXX、<br />
          XXXXXXXXXXXXXXXXXX、<br />
          XXXXXXXXXXXXX
        </p>
        <a href="/about/" class=""><span>もっと詳しく</span></a>
      </div>

Comments

[yoshinavi]

＞このような事は、一つのブロックのみで実現できるでしょうか？
→　出来ます。

＞同じ内容を２つ用意して一つは「スマホ、タブレット用」「PC以上用」というふうにして、表示、非表示で対応すべきなのでしょうか？
→　これも問題ないです。ありです。

回答が2種類出ていますが、どちらも問題ありませんので、状況に合わせて好みで良いかと思います。

Answer 1

text-align を指定するText alignmentユーティリティーがレスポンシブ対応（ブレイクポイントごとに指定）しているのでそれを使えば実現可能です
https://getbootstrap.com/docs/4.3/utilities/text/#text-alignment

<p class="text-center text-md-left">最小〜mdサイズまで中央寄せ mdより広いサイズで左寄せ</p>

Answer 2

同じ内容を２つ用意して一つは「スマホ、タブレット用」「PC以上用」というふうにして、表示、非表示で対応すべきなのでしょうか？

個人的にはそのやり方で良いと思います。
Display propertyにそってサイズによって表示非表示をわける感じですね。
メニューの表示非表示もサイズによって表示する内容をわけますが、それと近いです。

Answer 3

@media screen and (max-width:1023px) {
    /* 画面サイズが1023pxまではここを読み込む */
    /* 中央寄せの記述 */
}
@media screen and (min-width:1024px) {
    /* 画面サイズが1024pxからはここを読み込む */
    /* 左寄せの記述 */
}

または

/* 中央寄せの記述 */
@media screen and (min-width:1024px) {
    /* 画面サイズが1024pxからはここを読み込む */
    /* 左寄せの記述 */
}

か

/* 左寄せの記述 */
@media screen and (max-width:1023px) {
    /* 画面サイズが1023pxまではここを読み込む */
    /* 中央寄せの記述 */
}

最後の２つは「CSSは後出しジャンケン」という原則を適用したものです。
意味不明でしたらコメントに書いていただくか「CSS 後出しジャンケン」と調べてみてください。

###追記
Bootstrap関係ない回答でしたねすみません。