Building responsive footer in ReactJS

I have some issues to figure out how to manage to build a responsive footer. Until now I got this . On normal screen is looking nice but when you switch to the ‘device-toolbar’ (mobile version) of the aplication it’s getting messed up . (paragraphs and icons come under each other) I’ll be glad if I can recieve some help here. Thank you.

[Normal Screen][1] [1]: https://i.stack.imgur.com/HiZNV.jpg [Mobile Screen][2] [2]: https://i.stack.imgur.com/6LKMA.jpg

P.S. I am building my aplication on ReactJS and here is part of my code:

Footer.js

<div id='social'>

  <a className='fa fa-linked-in' target='_blank' rel='noopener noreferrer' href='https://linkedin.com/in/sample-7842b814a'></a>
  <a className='fa fa-github' target='_blank' rel='noopener noreferrer' href='https://github.com/sample'></a>
  <a className='fa fa-google' rel='noopener noreferrer' href="mailto:[e-mail]"></a>
  <a className='fa fa-instagram' target='_blank' rel='noopener noreferrer' href='https://www.instagram.com/sample/?hl=undefined'></a>

</div>

<div id='elements'>

  <img id='phone' src={phone} />
  <p>[phone]</p>

  <img id='email' src={email} /> <p>[e-mail]</p>
  <img id='pin' src={pin} /> <p>Antwerp , Belgium</p>
</div>

**App.cs**

    #footer{
      background-color:#051222;
      width: 100%;
      height: 100px;
      position: absolute;
      overflow: hidden;
      bottom: 0;
      }
    
      @media only screen and (max-width: 480px) {
        #footer ul li a img {
          max-width: 100%;
          display: block;
          /* height: auto; */ 
         }
        }
   p {
  color: #d35360;
  display:inline-block;
  margin: 50px 40px 0 10px;  
  overflow: none;
  font-family: 'Lato', sans-serif;
}

img {
  height: 100%;
  vertical-align: middle;
}

Answer

Perhaps you could use the following:

  @media only screen and (max-width: 480px) {
    #footer #elements, #footer #social {
      float:none; /* Ensure stacking */
      display:block; /* Ensure stacking */
      text-align:center; /* Ensure horizontal centering of all footer content */
    }

    #footer #elements {
      position:relative;
      padding-top: 1rem;  /* Reserve vertical space for phone number */
    }

    #footer #elements p {
      position:absolute; /* Causes the phone number to position above social buttons */
      top:0;
      left:0;
      right:0;
    }
  }

This would take a “vertical stacking” approach to the layout, which is a more mobile-friendly approach. This solution also uses a technique based on position:absolute; to place the phone number above the social network buttons.