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

Сергей

05.03.2018, 23:17

Приветствую! Есть вопрос. Как сделать так, что бы текст обтекал картинку при уменьшении окна браузера? Картинка и текст лежат в:


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