I have a footer with two divs that I need to be centered and side by side. When the screen size reaches 960px, I want the second div to move below the first one while still staying centered. Does anyone know how to achieve this?
Below is my code snippet:
.content {
width: 100%;
display: flex;
justify-content: center;
}
.contentWrapper {
display: flex;
}
.contentItem {
display: flex;
flex-direction: column;
align-items: center;
width: 260px;
box-sizing: border-box;
}
@media (max-width: 960px) {
.contentWrapper {
flex-direction: column;
}
}<div class='content'>
<div class='contentWrapper'>
<div class='contentItem'>
<p>Name</p>
<p>Address</p>
<p>Email</p>
<p>Phone</p>
</div>
<div class='contentItem'>
<p>Name</p>
<p>Address</p>
<p>Email</p>
<p>Phone</p>
</div>
</div>
</div>This seems like a simple task, but I've been struggling with it for some time now.