html - 如何在同一行上放置文本和社交媒体图标

我正在尝试将x2社交媒体图标对齐到我的一页网站页脚的某些文本的两侧。

这是我希望它在桌面/宽屏上显示的示例。Desktop/Wide Screens

这是我希望它在移动/窄屏上显示的示例。
Mobile/Narrower Screens

我已经在下面输入了到目前为止的代码（当前未添加社交媒体图标）

附言我的社交媒体图标另存为facebook.png和twitter.png

body {
    background-color: #000;
    font-family: 'Roboto Mono', 'Arial', sans-serif;
    font-size: 250%;
    font-weight: 300;
}

.logo {
    display: block;
    margin: 50px auto;
}


p {
    color: #ccc;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.coming-soon {
    color: #333;
    letter-spacing: 3px;
}

.autumn-2017 {
    color: #ccc;
}

section p {
    display: block;
    margin: 50px auto 10px;
    font-size: 35%;
    text-transform: none;
    letter-spacing: 3px;
    line-height: 25px;
    color: #333;
}

.contact-info {
    margin: 15px auto;
    letter-spacing: 3px;
    line-height: 25px;
    color: #ccc;
    text-decoration: none;
    text-transform: none;
    font-size: 35%;
}

a:link,
a:visited {
    text-decoration: none;
    color: #ccc;
    transition: font-weight 0.2s;
}

a:hover,
a:active {
    text-decoration: none;
    color: #ccc;
    font-weight: 500;
}

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="desctription" content="Web Design & Development">

        <link rel="stylesheet" type="text/css" href="normalize.css">
        <link rel="stylesheet" type="text/css" href="grid.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="queries.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700" rel="stylesheet">

        <meta name="msapplication-config" content="resources/favicons/browserconfig.xml">

    </head>
    <body>
        <header>

            <div>
                <img src="iz-icon-logo.png" class="logo" alt="logo">
                <p><span class="coming-soon">coming soon.</span><span class="autumn-2017">&nbsp;autumn 2017.</span></p>
            </div>

        </header>
        <section>
            <div>
                <p>If you have a Web Design or Development enquiry,<br>please contact:</p>
                <p class="contact-info"><a href="mailto:[email protected]">[email protected]</a><br><a href="tel:07903490453">+44 (0) 7903 490453</a></p>
            </div>

        </section>
    </body>
</html>

最佳答案

可以使用Flexbox并正确使用@media查询和order属性来实现：

您可以选中此JSFiddle以使用浏览器大小播放。

footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

footer p {
  margin: 0 30px;
}

@media (max-width: 480px) {
  footer {
    flex-direction: column;
  }

  footer i{
    order: 2;
  }
}

<footer>
  <i>icon one</i>
  <p>links</p>
  <i>icon two</i>
</footer>