I am having trouble getting the content on the right of an image in a card to the be below the image using bootstrap and CSS. I have tried looking for solutions online and on the bootstrap documentation but I could not find anything that solves my problem. When I go below a certain responsive size I just want to position the AppName, Description and AppDescription below the image. Thanks for the help.

Html Below

```
    <div class="card">
        <div class="row no-gutters">
           <div class="col-auto col-md-6">
               <img src="img/image.jpg" class="img-fluid image" alt="PayCloud App Demo" width="620" height="465">
           </div>
           <div class="col">
             <div class="card-block px-2">
                <p class="card-title AppName">AppName</p>
                <p class="card-title Description">Restaurant Payment Service - January 2020</p>
                <p class="card-text AppDescription">App Description.</p>
                <a href="link.html"><span class="button">View Project</span></a>
             </div>
          </div>
       </div>
</div>

```

CSS Below

```
.AppName{
    font-family: itc-avant-garde-gothic-pro,sans-serif; /* ITC Bold */ 
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    margin-top: 10%;
    margin-bottom: 0;
    text-align: left;
    font-size: 42px;
    width: 50%;
    margin-left: 5%;
    opacity: 80%;
}

.Description{
    color: #869FC9;
    width: 60%;
    margin-left: 5%;
    margin-top: 0;
    margin-bottom: 5%;
}

.AppDescription{
    opacity: 87%;
    width: 90%;
    margin: auto;
    font-family: realist, sans-serif;
    font-weight: 400;   
    font-style: normal;
    font-size: 18px;
    margin-bottom: 2%;
}

```