css - 3列响应式页脚

我正在尝试创建一个包含三列的页脚（全屏显示时，前两列并排）。调整窗口大小时，应该更改三列的位置，以使它们分别位于一行上。

到目前为止，我有这个：https://jsfiddle.net/mtwL5oj0/

HTML：

<div id="u-row">
    <ul>
        <li>000-000-0000</li>
        <li>[email protected]</li>
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
    </ul>
</div>

<div id="l-row">
    <ul>
        <li>© 2017 text</li>
        <li>ALL RIGHTS RESERVED.</li>
        <li>PRIVACY POLICY.</li>
    </ul>
</div>

CSS：

#u-row {
    float: center;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#u-row ul {
    list-style: none;
    margin: 0 auto;
}
#u-row ul  li{
    display: inline-block;
    padding-right: 30px;
    color: #000;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1.5px;
}
#l-row {
    float: left;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 15px;
   padding-bottom: 60px;
}
#l-row ul {
    list-style: none;
    margin: 0 auto;
}
#l-row ul  li{
    display: inline-block;
    padding-right: 10px;
    color: #000;
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
}

如果您检出图像，则在调整窗口大小时会看到它们不会断线。我试图再创建一列，但是当窗口全屏显示时，我无法并排显示第一列和第二列。

任何提示/解决方案？

最佳答案

尝试这个

<div id="u-row">
            <div>000-000-0000</div>
            <div>[email protected]</div>
            <div>
                <ul>
                    <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
                    <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
                    <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
                    <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
                </ul>
            </div>
        </div>

        <div id="l-row">
        &copy; 2017 text ALL RIGHTS RESERVED. PRIVACY POLICY.
        </div>

#u-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  flex-wrap: wrap;
}

#u-row > div {
    padding: 0 15px;
}

@media screen and (max-width: 700px) {
    #u-row > div {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
    }
    #u-row {

    }
}

#u-row ul {
  list-style: none;
  margin: 0 auto;
}

#u-row ul  li{
  display: inline-block;
  padding-right: 30px;
  color: #000;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 1.5px;
}

#l-row {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 60px;
}

#l-row ul {
  list-style: none;
  margin: 0 auto;
}

#l-row div {
  display: inline-block;
  padding-right: 10px;
  color: #000;
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 3px;
}

现场演示-https://jsfiddle.net/grinmax_/mtwL5oj0/1/