Как сделать чтобы картинка обтекала текст, если они в разных div?

Сергей
1K
0
Приветствую!
Есть вопрос. Как сделать так, что бы текст обтекал картинку при уменьшении окна браузера?
Картинка и текст лежат в:
<div class="container content">
Сама картинка в:
<div class="col-md-6">
<img src="img/slide1.png" alt="">
</div>
А текст в:
<div class="col-md-4">
  <div class="about-text">
    <p>текст</p>
  </div>  
</div>
В разных контейнерах на большом экране смотрится норма. Но когда экран сжимаешь, то получается что текст уходит вниз и под картинкой много свободного места остаётся.

Как сделать так, чтобы текст под картинку уходил при уменьшении окна?

Комментарии ()

  1. Александр Мальцев
    15 марта 2018, 16:18
    Вам необходимо просто с помощью стилей изменить поведение блоков.
    Например, так:

    <style>
    @media (max-width: 769px) {
      .bl-1 { 
        float: left;
        width: auto !important;
      }
      .bl-2 {
        display: block;
        width: auto !important;
      }
    }
    </style>
    
    <div class="container">
        <div class="row">
            <div class="bl-1 col-md-6">
                <img src="image.jpg" width="200">
            </div>
            <div class="bl-2 col-md-4">
                Текст...
            </div>
        </div>
    </div>
    
    Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.