Как в display:flex перенести последний элемент на другую строку?

266

14 февраля 2019, 10:00

Есть с трока с col-lg-12. У нее d-flex. Но при адаптиве нужно, чтобы на планшетной версии последний div был на новой строке.
Как его перенести туда? Верстаю с бутстрапом.

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

Answer 1

<!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>

Answer 2

Как например:

.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>

Но если Вы хотите именно для своего примера, то помимо d-flex нужно задать flex-wrap док. разрешает перенос блоков, если они не вмещаются по ширине. Для планшетов или любого другого разрешения задаются префиксы .flex-sm-wrap, .flex-md-wrap, .flex-lg-wrap.