Bootstrapのグリッドシステムの使い方

Question

スマホで見たときに左の画像の下に右でしている説明を表示したい。
containerクラスの中にrowクラスを作りその中にcol-xs-12と指定すれば表示できると考えていましたができませんでした。
どなたか教えていただけないでしょうか。
※Bootstrapは5.0.0を使用

 <div class="container">
        <h2>住んでる町</h2>
        <table>
            <div class="row">
                <tr>
                    <td>
                        <div class="col-xs-12"><h5>山</h5><img src="img/mountain.jpg" id="map"></div>
                    </td>
                    <td>
                        <div class="col-xs-12">
                            <p>地表の高くもり上がっているところの総称。やま。また、そのようなもの。「山川・山河・山海・山岳・山塊・山脈・山間・
                                山麓(さんろく)・山頂・山積・高山・深山・青山・大山・満山・火山・遊山(ゆさん)・名山・登山・富士山・須弥山(しゅみせん)・
                                中山道(なかせんどう)」。鉱物を掘るための鉱山についてもいう。</p>
                        </div>
                        
                    </td>
                </tr>
            </div>
       </table>
</div>

Answer 1

<table>直下に<div>を置くというのは、Bootstrap以前にHTMLとして正しくありません。

Bootstrapのレスポンシブなグリッドを使いたいのなら、<table>は逆に不適当かと思います。

Comments

[maisumakun]

何を参考にしてこのようなコードを書いたのか、逆に気になるレベルです。

[boron]

ありがとうございました。
もう一度調べなおします。

Answer 2

tdの中で個別にグリッドする必要がないのでしたらtable採用は不適当です。

「そもそもBootstrapにおけるグリッドシステムとは？」をドキュメント確認した上で実装されたほうが良いと思います。

Comments

[boron]

ありがとうございました。
コメントを参考にさせていただき調べなおしてみます。