Responsive footer with 3 columns

Question

I am trying to create a footer that with three columns (the top two columns are side by side when fullscreen). When the window is resized the three columns are supposed to change position so they are each on one line instead.

I have this so far: 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;
}

If you check out the images you will see when resizing the windows that they don't do line break together. I have tried to create one more column but then I can't get the first and second column side by side when the window is fullscreen.

Any tips/solutions?

Answer 1

Try this

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

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