Отзывчивый нижний колонтитул с 3 колонками

Question

Я пытаюсь создать нижний колонтитул с тремя колонками (верхние два столбца бок о бок при полноэкранном режиме). Когда размер окна изменяется, три столбца должны изменить положение, чтобы они были на одной линии вместо них.

меня это до сих пор: https://jsfiddle.net/mtwL5oj0/

HTML:

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

Если вы проверить изображения, которые вы увидите при изменении размеров окна, которые они надевают» t разбить линию. Я попытался создать еще один столбец, но затем я не могу получить первый и второй столбцы бок о бок, когда окно полноэкранное.

Любые советы/решения?

Answer 1

Попробуйте

<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; 
} 

Live Demo - https://jsfiddle.net/grinmax_/mtwL5oj0/1/

Answer 2

Чтобы достичь этого быстро и легко, вы можете использовать гибкую структуру CSS, например Bootstrap.

В противном случае вам понадобится использовать media queries, чтобы изменить правила, применяемые при разных размерах экрана.

Answer 3

Вам просто нужно обернуть каждый из двух верхних колонн в div и установить display: inline-block; для этой дивы:

.lcol, .rcol { 
 
    display: inline-block; 
 
} 
 
#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 class="lcol"> 
 
    <ul> 
 
\t \t <li>000-000-0000</li> 
 
\t \t <li>text@text.com</li> 
 
\t </ul> 
 
    </div> 
 
    <div class="rcol"> 
 
\t <ul> 
 
\t \t <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
 
\t \t <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
 
\t \t <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
 
\t \t <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
 
\t </ul> 
 
    </div> 
 
</div> 
 
<div id="l-row"> 
 
    <ul> 
 
\t  <li>© 2017 text</li> 
 
\t \t <li>ALL RIGHTS RESERVED.</li> 
 
\t \t <li>PRIVACY POLICY.</li> 
 
    </ul> 
 
</div>