Css 具有3列的响应页脚

我试图创建一个有三列的页脚（全屏显示时，前两列并排显示）。调整窗口大小时，三列应改变位置，使它们分别位于一行上

到目前为止，我有：

HTML:

如果您签出这些图像，则在调整窗口大小时会看到这些图像不会在一起断线。我试图再创建一列，但是当窗口全屏显示时，我无法同时获得第一列和第二列

---

有任何提示/解决方案吗？

您可以使用类似的响应式CSS框架快速轻松地实现这一点

---

否则，您将需要使用更改在不同屏幕大小下应用的规则。

您只需将上面两列中的每一列包装到

div

中，然后设置

显示：内联块对于这些div：


.lcol、.rcol{
显示：内联块；
}
#u行{
浮动：中心；
宽度：100%；
保证金：0自动；
文本对齐：居中；
}
#u-row ul{
列表样式：无；
保证金：0自动；
}
#u-row ul li{
显示：内联块；
右侧填充：30px；
颜色：#000；
字体大小：14px；
字体系列：“开放式Sans”，无衬线；
字母间距：1.5px；
}
#l行{
浮动：左；
宽度：100%；
保证金：0自动；
文本对齐：居中；
填充顶部：15px；
填充底部：60px；
}
#l-row ul{
列表样式：无；
保证金：0自动；
}
#l-row ul li{
显示：内联块；
右边填充：10px；
颜色：#000；
字体大小：10px；
字体系列：“开放式Sans”，无衬线；
字母间距：3px；
}


000-000-0000
text@text.com








©2017年文本
版权所有
隐私政策

试试这个

<div id="u-row">
            <div>000-000-0000</div>
            <div>text@text.com</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;
}


000-000-0000
text@text.com






&抄袭；2017文本保留所有权利。隐私政策。
#u行{
显示器：flex；
证明内容：中心；
宽度：100%；
保证金：0自动；
文本对齐：居中；
柔性包装：包装；
}
#u行>分区{
填充：0 15px；
}
@媒体屏幕和屏幕（最大宽度：700px）{
#u行>分区{
宽度：100%；
文本对齐：居中；
垫底：10px；
}
#u形排{
}
}
#u-row ul{
列表样式：无；
保证金：0自动；
}
#u-row ul li{
显示：内联块；
右侧填充：30px；
颜色：#000；
字体大小：14px；
字体系列：“开放式Sans”，无衬线；
字母间距：1.5px；
}
#l行{
文本对齐：居中；
填充顶部：15px；
填充底部：60px；
}
#l-row ul{
列表样式：无；
保证金：0自动；
}
#l行分区{
显示：内联块；
右边填充：10px；
颜色：#000；
字体大小：10px；
字体系列：“开放式Sans”，无衬线；
字母间距：3px；
}

现场演示-
这是您想要的吗
#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>text@text.com</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;
}