Bootstrap4: "col-12" is still too wide in the mobile screen, how can I wrap text?

Question

I'm using Bootstrap4 for the grid systems. I'm using col-12 for the mobile screen, and col-md-6 for the laptop screen. When I check my website on the mobile phone, the first image is too large, and also the texts don't wrap but it extends to the side. How can I fit my contents to the mobile screen using the bootstrap4 grid system? Below is my current code:

.album {
    margin-bottom: 100px;
}
.album img {
    width: 800px;
}
.container {
    width: 800px;
}
.content {
    padding: 2px;
    width: 100%;
}

.blogWriting {
    margin-bottom: 80px;
    padding: 15px 35px;
    font-size: 13px;
}

.dateWriting {
    text-align: right;
    font-size: 13px;
    padding: 15px 35px;
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="album container">
  <div class="row justify-content-center">
      <div class="col-12 col-md-auto">
          <img src="https://via.placeholder.com/150" alt="d">
      </div>
  </div>

  <div class="row justify-content-center">
          <div class="col-12 col-md-6 content">
              <div class="blogWriting">
              <p><b>Crown Heights</b> is simply dummy text of
                  the printing and typesetting industry.
                  Lorem Ipsum has been the industry's standard
                  dummy text ever since the 1500s,
                  when an unknown printer took a galley
                  of type and scrambled it to make a type
                  specimen book. It has survived not only
                  five centuries, but also the leap into
                  electronic typesetting, remaining
                  essentially unchanged.
              </p>
              <p><b>Bushwick</b> is simply dummy text of
                  the printing and typesetting industry.
                  Lorem Ipsum has been the industry's standard
                  dummy text ever since the 1500s,
                  when an unknown printer took a galley
                  of type and scrambled it to make a type
                  specimen book. It has survived not only
                  five centuries, but also the leap into
                  electronic typesetting, remaining
                  essentially unchanged.
              </p>
              </div>
          </div>

          <div class="col-12 col-md-6 content">
              <div class="dateWriting">
                  <p>October 28th, 2020 <br>
                  By Name</p>
              </div>
          </div>
  </div>
</div>

Answer 1

The size of image and container is defined 800px so It will always be 800px, use media queries for mobile or use width: 100% for img style

.album {
  margin-bottom: 100px;
}
.album img {
    width: 100%;
}
.container {
    width: 100%;
}

or try this

    .album {
      margin-bottom: 100px;
    }
    .album img {
        width: 800px;
    }
    .container {
        width: 800px;
    }

@media(max-width: 767px){
         .album img {
        width: 100%;
    }
    .container {
        width: 100%;
    } 
    }