социальные иконки в ряд, когда на мобильном вид

Question

Я хочу, чтобы мои иконки социальных сетей находились в направлении строки (с левой стороны) в режиме просмотра с мобильных устройств. В представлении рабочего стола значки должны находиться в правой части столбца, и я сделал это с помощью float: right, но что я должен изменить, чтобы получить их в горизонтальной линии (inline) на левой стороне? Это мой HTML:

 <div class="socialico">
            <div id="social-test">
                    <ul class="social">
                      <li><a class = "facebook" href="https://www.facebook.com/bay42.io/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                      <li><a class = "instagram" href="https://www.instagram.com/bay42.io/"><i class="fa fa-instagram" aria-hidden="true"></a></i></li>
                      <li><a class = "linkedin" href="https://www.linkedin.com/company/bay42-banja-luka/"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                    </ul>
            </div> <!--social-test div-->
    </div>

, а вот мой CSS:

.socialico{
             position: relative;
             float: right;
             margin-top: -8%;
             color: #fff;
             animation: slideInRight 1.5s;
            } 
         #social-test ul li{
             padding-bottom: 10px;
        }
        .socialico ul li a:hover{  
    color: #C8A962;
    animation: bounceIn 6s;
        }
        .socialico ul li a { 
    color:#fff;
}

также, вот мой CSS для мобильного просмотра:

.socialico{

            position: relative;
            float:left;
            margin-top: -8%;
            color: #fff;
            animation: slideInRight 1.5s;
           } 
        #social-test ul li{
            display: inline-block;
       }
       .socialico ul li a:hover{  
   color: #C8A962;
   animation: bounceIn 6s;
       }
       .socialico ul li a { 
   color:#fff;
   display: inline-block;

}}

Answer 1

Все, что вам нужно сделать, это установить ul на flex и установить flex-direction на row.

CSS:

@media only screen and (max-width: 576px) {
  .socialico {
    float: left;
  }
  #social-test ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
}