I am trying to get this code to behave more responsively but I have not been able to find a good solution.
As the browser window shrinks towards mobile sizes, the list becomes really narrow, and the picture/video items on the right become really small and aesthetically unpleasing. I think this is partially due to the fact that I am unable to get the picture/video items on the right move below the central column, the one with all of the bullet points to allow the to expand out more to the right.
I'd like all elements to take up full width (with the default padding of course) of the screen as the site becomes smaller. Essentially this means that the right-most column containing the video player and the cartoon would move below the entry to its left. Something like this: 
instead of what it currently looking like what the above code currently looks like in mobile: 
and 
. While preserving this look in desktop: 
<section id="about">
<div class="container">
<h3 class="font-weight-bold text-center">Discovering The Future. </h3>
<div class="row mt-4">
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-auto">
<img src="https://picsum.photos/140/65" alt="" class="img-fluid testphoto">
</div>
<div class="col pt-3">
<h2>The Cao Lab</h2>
<h3 class="font-weight-bold pt-1 pb-3">April 2016 - Present</h3>
<ul>
<li class="pb-3">Employ alkene metathesis to produce porous molecules valuable for encapsulation and adsorption applications</li>
<li class="pb-3">Prepare analytical samples, preform characterization analysis, and interpret results for molecules of interest</li>
<li class="pb-3">Communicate research to others by attending conferences and poster presentations</li>
<li class="pb-5">Devised a cost-effective method to quantify hydrogen production during evolution experiments</li>
</ul>
</div>
<div class="col-sm-3 ">
<div class="embed-responsive embed-responsive-5by3 teensie">
<iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/KPZ8HHRR1A0"></iframe></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-auto">
<img src="https://picsum.photos/140/65" alt="" class="img-fluid testphoto">
</div>
<div class="col pt-3">
<h2>Institut Parisien de Chimie Moléculaire
</h2>
<p class="text-primary">National Science Foundation Internation REU Program.</p>
<h3 class="font-weight-bold pb-3">May 2017 - August 2017</h3>
<ul>
<li class="pb-3">Conduct study on the selective deprotection of perbenzylated a-cyclodextrin to access novel functionalization</li>
<li class="pb-3">Synthesize molecules suitable as ligands in metal-catalysis and for improving chiral HPLC discrimination ability</li>
<li class="pb-3">Prepare analytical samples, preform characterization analysis, and interpret data of cyclodextrin derivatives</li>
<li>Submitted abstract to present at the Chemical Education Division of the 255th ACS National Meeting</li>
</ul>
</div>
<div class="col-sm-3 ">
<img src="https://vignette.wikia.nocookie.net/rayman/images/c/cf/Teensy.png" alt="" class="img-fluid teensie2 ">
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
.shift{
margin-left:20px;
}
.barbie{
list-style: none;
margin: 0;
padding: 0;
}
.barbieitem{
//text-align: right;
font-size: 1.3em;
}
.testphoto {
display: inline-block;
vertical-align:middle;
}
.joblist{
display: inline-block;
}
.labname{
display: inline-block;
vertical-align:middle;
border:solid black 1px;
}
.youtube {
max-width: 300px;
max-height: 300px;
position: relative !important;
float: right;
}
.teensie{
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.teensie2{
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
