bootstrapを使ってレスポンシブサイトを作って欲しい

実現したいこと

bootstrapを使ってレスポンシブに対応したサイトを簡単に作りたい!

前提

今ハンバーガーメニューがある練習サイトを作っています。ある程度は作れて、あとはレスポンシブに対応させるだけになりました。そこでbootstrapを使って対応させようと思ったのですが、ごちゃごちゃしていてどこにrowを置けばいいのか、などがわからなくなってしまったので、bootstrapを使い、いい感じのサイトを作ってもらってどこにrowを置けばいいのか？やどこにcolクラスをつければいいのかなど教えてもらいたいです。

該当のソースコード

HTML
1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>Humberger Menu</title>
7    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
8    <link rel="stylesheet" href="style.css">
9    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10      rel="stylesheet">     
11  </head>
12  <body >
13      <div id="body">
14        <div id="humberger">
15            <div id="icon">
16                <span class="material-icons" id="men">menu</span>
17            </div>
18
19            <div id="close">
20                <span class="material-icons" id="clo">close</span>
21            </div>
22        </div>
23
24
25                <div id="menu">
26                    <li><a href="">Menu</a></li>
27                    <li><a href="">Menu</a></li>
28                    <li><a href="">Menu</a></li>
29                    
30                </div>
31
32            <div>
33                <h1 class="col-6">LOGO</h1>
34                <p>こんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちは</p>
35            </div>
36
37
38        </div>
39    
40
41    <script src="main.js"></script>
42    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
43  </body>

CSS
1h1 {
2    margin-top: 0px;
3    font-size: 40px;
4}
5
6
7#icon.animation #men{
8    opacity: 0; 
9    transition: opacity .3s;
10    display: none;
11}
12
13
14
15
16
17.body :not(a):not(#humberger):not(div):not(svg):not(path):not(li):not(span){
18    opacity: .1;
19    transition: opacity .3s;
20}
21
22
23.body h1{
24    position:relative;
25    z-index:-1;
26  }
27
28  #close:not(.show) {
29    display:none;
30    }
31
32
33    a {
34        text-decoration: none;
35    }
36
37    #men {
38        font-size: 48px;
39        line-height: 64px;
40        margin-top: -10px;
41    }
42
43#menu li {
44    display: block;
45    margin-top: 16px;
46    transform: translateY(16px);
47    margin-bottom: 10px;
48
49}
50 
51#menu.hum  li {
52    z-index: 10;
53 opacity: 1;
54    transform: translateY(-16px);
55    transition: opacity .3s,transform .3s;
56    padding: 0;
57    margin: 0;
58}
59
60#menu.hum li:nth-child(2) {
61    z-index: 11;
62    padding: 0;
63    margin-top: 40px;
64    transition-delay: .3s;
65}
66
67#menu.hum li:nth-child(3) {
68    margin-top: 80px;
69    padding: 0;
70    transition-delay: .6s;
71}
72
73
74
75
76li {
77    padding: 0;
78    margin: 0;
79}

Javascript
1
2        'use strict';
3
4        const humberger = document.getElementById('humberger');
5        const menu = document.getElementById('menu');
6        const body = document.getElementById('body');
7        const icon = document.getElementById('icon');
8        const close = document.getElementById('close');
9        const path = document.getElementById('path');
10
11
12    icon.addEventListener('click',() => {
13        menu.classList.toggle('hum');
14        body.classList.toggle('body');
15        icon.classList.toggle('animation');
16        close.classList.toggle('show');
17    
18    });
19
20    close.addEventListener('click', () => {
21            menu.classList.toggle('hum');
22        body.classList.toggle('body');
23        icon.classList.toggle('animation');
24        close.classList.toggle('show');
25    })
26
27        
28