How do I align these pictures vertically?

I'm creating a footer, and I would like to align the images of social networks vertically and automatically. As it has an increase in the size of the source of the contacts, the images are up. And I do not know how to proceed.

My code on jsfiddle: Demo Code

HTML

<!DOCTYPE html>
<title>Teste</title>

<body>
  <footer class="footer">
    <div class="content">
      <div class="footer-right">
        <p><b>(43)3333-3333</b></p>
        <p>[email protected]</p>
      </div>
      <div class="footer-left">
        <ul>
          <li>
            <a href="#"><img src="http://imgur.com/RVvPQt9.png" alt="Twitter"></a>
          </li>
          <li>
            <a href="#"><img src="http://imgur.com/LsqUBIh.png" alt="Facebook"></a>
          </li>
          <li>
            <a href="#"><img src="http://imgur.com/8PhKmDe.png" alt="Instagram"></a>
          </li>
          <li>
            <a href="#"><img src="http://imgur.com/hDSPEMm.png" alt="Linkedin"></a>
          </li>
        </ul>
      </div>
    </div>
  </footer>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

.content {
  margin: 0 auto;
  max-width: 1100px;
  padding: 0 4% 0 4%;
}

li {
  list-style: none;
}

.footer {
  background-color: rgba(158, 158, 158, 0.42);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  padding: 15px 0;
  overflow: hidden;
}

.footer .footer-right {
  float: right;
}

.footer .footer-right {
  font-size: 18px;
  text-align: right;
}

.footer .content .footer-left {
  float: left;
}

.footer .content .footer-left > ul > li {
  display: inline-block;
}

.footer > .content > .footer-left > ul > li > a {
  display: block;
}

.footer > .content > .footer-left > ul > li > a > img {
  height: 30px;
  width: 30px;
}


/*MEDIA QUERIES*/

@media screen and (max-width: 400px) {
  .footer > .content > .footer-right,
  .footer-left {
    float: none !important;
    text-align: center;
  }
  .footer > .content > .footer-right {
    margin-bottom: 10px;
  }
}

Solution

Use table display css - the table-cell causes the floating to work and the table-header-group and table-footer-group cause the reordering.

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
}

.content {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 4% 0 4%;
    min-width:92%;
    display:table;
}

li {
    list-style: none;
}

.footer {
    background-color: rgba(158, 158, 158, 0.42);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    padding: 15px 0;
    overflow: hidden;
}

.footer .footer-right {
    display:table-cell;
    width:50%;
}

.footer .footer-right {
    font-size: 18px;
    text-align: right;
    width:50%;
}

.footer .content .footer-left {
    display:table-cell;
    vertical-align:middle;
}

.footer .content .footer-left > ul > li {
    display: inline-block;
}

.footer > .content > .footer-left > ul > li > a {
    display: block;
}

.footer > .content > .footer-left > ul > li > a > img {
    height: 30px;
    width: 30px;
}


/*MEDIA QUERIES*/

@media screen and (max-width: 400px) {
    .footer > .content > .footer-left {
        display:table-footer-group;
        width:100%;
        float:none;
        text-align: center;
    }
    .footer > .content > .footer-right {
        display:table-header-group;
        margin-bottom: 10px;
        float:none;
        width:100%;
    }
    .footer > .content > .footer-right p {
        width:100%;
        display:block;
        text-align: center;
    }
}

<!DOCTYPE html>
    <title>Teste</title>
<body>
    <footer class="footer">
        <div class="content">
            <div class="footer-left">
                <ul>
                    <li>
                        <a href="#"><img src="http://imgur.com/RVvPQt9.png"
                                alt="Twitter"></a>
                    </li>
                    <li>
                        <a href="#"><img src="http://imgur.com/LsqUBIh.png"
                                alt="Facebook"></a>
                    </li>
                    <li>
                        <a href="#"><img src="http://imgur.com/8PhKmDe.png"
                                alt="Instagram"></a>
                    </li>
                    <li>
                        <a href="#"><img src="http://imgur.com/hDSPEMm.png"
                                alt="Linkedin"></a>
                    </li>
                </ul>
            </div>
            <div class="footer-right">
                <p><b>(43)3333-3333</b></p>
                <p>[email protected]</p>
                <p><b>(43)3333-3333</b></p>
                <p>[email protected]</p>
            </div>
        </div>
    </footer>
</body>