Flex boxs overlapping in direction column-CodePudding

I am trying to make a footer that displays a button on the left, and 3 social media icons on the right and a copyright text below it which I seem to have working fine. The issue is for mobile im then trying to make it so they all stack on top of one another but the button and icons seem to be overlapping each other.

HTML

<div >
  <div >
    <div>
        <a id="login" href="/login" >Sign in</a>
    </div>
    <div >
      <img alt="Facebook"  src="/images/facebook.png">
      <img alt="Instagram"  src="/images/instagram.png">
      <img alt="Twitter"  src="/images/twitter.png">
    </div>
  </div>
  <!-- Copyright -->
  <div >© 2022 Copyright:
    <a href="/"> NAME</a>
  </div>
</div>

CSS

.footer{
  background-color: white;
  padding-top:20px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 5px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footerHeader{
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  width: 100%;
}

.socialMedia{
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: space-evenly;
  float: right;
}

.icon{
  margin-right: 10px;
  margin-left: 10px;
  width: 64px;
  height: 64px;
  transition: transform .2s;
}


.footerCopyright{
  margin: 10px;
}

Media querys for footer:

.footer{
  min-height: 50vh;
  justify-content: space-between;
}

.footerHeader{
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0px;
  height: 25vh;
}

.socialMedia{
  flex-direction: column;
}

.icon{
  margin: 0 auto;
  margin-bottom: 20px;
}

CodePudding user response：

This is minimum working demo code in which you can make changes and use it.

.top {
    display: flex;
    justify-content: space-between;
}

.social-media {
    display: flex;
    flex-flow: row;
}

.social-media img {
  margin-left: 10px;
}
.footerCopyright {
  margin-top: 10px;
}

@media screen and (max-width: 480px) {
   .social-media {
      flex-flow: column;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .social-media img {
      margin-left: 0;
      margin-top: 10px;
    }
    .top {
        display: block;
    }
}

<div >
  <div >
  <a href="">Button</a>
  <div >
    <img alt="Facebook"  src="/images/facebook.png">
    <img alt="Instagram"  src="/images/instagram.png">
    <img alt="Twitter"  src="/images/twitter.png"> 
  </div>    
  </div>
  <div >© 2022 Copyright:
    <a href="/"> NAME</a>
  </div>
</div>