There is a troc with col-lg-12 . She has d-flex . But with adaptive, you need the last div on the tablet version to be on a new line.
How to transfer it there? I make up with bootstrap.

enter image description here

 <div class="row"> <div class="col-lg-12 d-flex"> <div class="footer_contacts d-flex"> <div class="footer_contacts_logo"> <img src="img/logo_footer.png" alt=""> </div> <div class="footer_contacts_phone d-flex"> <div class="footer_contacts_phone_icon"> <img src="img/phone_icon_footer.png" alt=""> </div> <div class="footer_contacts_phone_number"> +7(812)509-61-36 </div> </div> <div class="footer_contacts_mail d-flex"> <div class="footer_contacts_phone_icon"> <img src="img/mail.icon_footer.png" alt=""> </div> <div class="footer_contacts_mail_email"> sc_silu@mail.ru </div> </div> <div class="footer_contacts_site d-flex"> <div class="footer_contacts_site_icon"> <img src="img/www_icon_footer.png" alt=""> </div> <div class="footer_contacts_site_isite"> www.spb-chongqing.com </div> </div> </div> </div> </div>

    2 answers 2

     <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style2.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row d-flex"> <div class="col-lg-3 footer_contacts_logo"> <img src="img/logo_footer.png" alt=""> </div> <div class="col-lg-3 footer_contacts_phone"> <div class="footer_contacts_phone_icon"> <img src="img/phone_icon_footer.png" alt=""> </div> <div class="footer_contacts_phone_number"> +7(812)509-61-36 </div> </div> <div class="col-lg-3 footer_contacts_mail"> <div class="footer_contacts_phone_icon"> <img src="img/mail.icon_footer.png" alt=""> </div> <div class="footer_contacts_mail_email"> sc_silu@mail.ru </div> </div> <div class="col-lg-3 footer_contacts_site"> <div class="footer_contacts_site_icon"> <img src="img/www_icon_footer.png" alt=""> </div> <div class="footer_contacts_site_isite"> www.spb-chongqing.com </div> </div> </div> </body> </html>

    • What did you want to say with this answer? - Sasha Omelchenko
    • We have 4 main blocks, including the logo. There are 12 columns in one row, so for each block we select 3 columns (we prescribe the class "col-lg-3"), this will allow to transfer all the blocks into one column, while reducing the screen resolution. - Alina Kasymova

    Such as:

     .footer_contacts { background: #27365d; color:#fff; } .contacts_val { white-space:nowrap; } 
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <div class="container"> <div class="footer_contacts"> <div class="row"> <div class="col-sm-3"> <div class="footer_contacts_logo"> <img src="https://dummyimage.com/100x100/ccc/fff&text=img" alt="" class="img-fluid"> </div> </div> <div class="col-sm-9"> <div class="row pt-4"> <div class="col-lg-4 col-sm-6"> <div class="footer_contacts_phone d-flex"> <div class="footer_contacts_phone_icon"> <img src="https://dummyimage.com/20x20/ccc/fff&text=img" alt=""> </div> <div class="footer_contacts_phone_number contacts_val"> +7(812)509-61-36 </div> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="footer_contacts_mail d-flex"> <div class="footer_contacts_phone_icon"> <img src="https://dummyimage.com/20x20/ccc/fff&text=img" alt=""> </div> <div class="footer_contacts_mail_email contacts_val"> sc_silu@mail.ru </div> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="footer_contacts_site d-flex"> <div class="footer_contacts_site_icon"> <img src="https://dummyimage.com/20x20/ccc/fff&text=img" alt=""> </div> <div class="footer_contacts_site_isite contacts_val"> www.spb-chongqing.com </div> </div> </div> </div> </div> </div> </div> </div>

    But if you want exactly for your example, then besides d-flex you need to set the flex-wrap dock. permits the transfer of blocks if they do not fit in width. For tablets or any other resolution prefixes are set .flex-sm-wrap , .flex-md-wrap , .flex-lg-wrap .