html/ css #media change padding and margin for a smaller screen - html

Question

I tried change the padding between different objects so that the content is not on top of each other. I tried changing the padding inside #media, but I see no changes.
<div class="row6">
<div class="final__tooltip top" title="Personalized Approach"
des="Teaching and learning are personal. Students and instructors feel welcomed and recognized when their needs are met in the classroom. Enabling flexible course delivery and offering a variety of technologies to accommodate different learning styles, shows instructors and students that classroom environments are tailored to their needs.">
<div class="design-col">
<img src="images/Home/Layer 2.svg">
<h3>Personalized Approach</h3>
</div>
</div>
<div class="final__tooltip top" title="Education is Accessible"
des="Designing with accessibility in mind ensures that everyone can access content in a way that meets their needs. Teaching and learning can be thought of as collaborative, consistent, and accessible no matter the department or role. Designing classroom environments that enable universal design for learning ensures that equity and access.">
<div class="design-col">
<img src="images/Home/Group-6.svg">
<h3>Education is Accessible</h3>
</div>
</div>
<div class="final__tooltip top" title="Instructor & Student Empowerment"
des="Support empowers students and instructors to adapt to new instructional environments. Empowered individuals feel comfortable and confident with venturing into new learning spaces.">
<div class="design-col">
<img src="images/Home/Group-7.svg">
<h3>Instructor & Student Empowerment</h3>
</div>
</div>
<div class="final__tooltip top" title="Recognize Emotional Stakes"
des="Individuals experience learning spaces along continuums of comfort that range from feelings of empowerment to those of discomfort. By recognizing that emotions are linked to class design and routines, solutions can be considered for a more accessible space.">
<div class="design-col">
<img src="images/Home/Group 57.svg">
<h3>Recognize Emotional States</h3>
</div>
</div>
<div class="final__tooltip top" title="Autonomy in Teaching and Learning"
des="Autonomy underscores the fact that instructors and students can meet their own needs when they have access to the right tools. Autonomy facilitates innovation and connection in learning spaces.">
<div class="design-col">
<img src="images/Home/Group-2.svg">
<h3>Autonomy in Teaching and Learning</h3>
</div>
</div>
</div>
.row6 {
display: flex;
justify-content: space-evenly;
margin-right: 40px;
margin-left: 40px;
margin-bottom: auto;
padding-bottom: 200px;
}
.design-col {
flex-basis: 40%;
margin: 5px;
background: transparent;
padding: 5px;
position: relative;
}
#media (max-width: 700px) {
.row6{
flex-direction: column;
}
}
[how it looks on the website right now][1]
[1]: https://i.stack.imgur.com/1V03S.png