html - Positioning divs on row and column on breakpoint

Question

I have footer which contains two divs and I want them center and side by side. On breakpoint (960px) I want second div move below first one but still stay centered. Does anybody have idea how to do that?

Here is my code:

.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>

question from:https://stackoverflow.com/questions/65952254/positioning-divs-on-row-and-column-on-breakpoint

Answer 1

HTML

<div class = 'content' > 
  <div class = 'contentWrapper' > 
   <div class = 'contentItem' > 
    <p> Nam1e </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>

CSS

 <style> 
  .content { display : flex ; justify-content : center ; }
  .contentWrapper { display : flex ; } 
  .contentItem { display : flex ; flex-direction : column ; align-items : center ; box-sizing : border-box ; } 
  @media ( max-width : 960px ) 
   { .contentWrapper 
    { flex-direction : column ; /* flex-direction: column-reverse; you can use this 
    for reverse (div-2 above and div-1 below) */ 
    } 
   } 
</style>