Bootstrap5の2カラムレイアウトで、PCなど画面が大きいときは右側に表示しているサイドバーを表示、モバイル端末では上に表示するレイアウトの記述方法。
<div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> <!-- Main content goes here --> <p>This is the main content for larger screens. It will appear on the left side.</p> </div> <div class="col-md-4"> <!-- Sidebar content goes here --> <p>This is the sidebar for larger screens. It will appear on the right side.</p> </div> </div>
この例では、flex-column-reverseクラスを使用。
これにより、モバイルデバイスでは、
要素が元の順序（つまり、HTMLで指定された順序）とは逆の順序で表示される。つまり、サイドバーが上、メインコンテンツが下となる。
flex-md-rowクラスは、デバイスの画面幅がmd（768px）以上の場合に行として表示するように指定する。これにより、メインコンテンツは左側、サイドバーは右側に表示される。
col-md-8とcol-md-4はBootstrapのグリッドシステムを使って、デバイスの画面幅がmd以上の場合に、メインコンテンツが8/12（すなわち2/3）、サイドバーが4/12（すなわち1/3）の幅を持つように設定している。
