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

Приветствую!

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

Картинка и текст лежат в:

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

В разных контейнерах на большом экране смотрится норма. Но когда экран сжимаешь, то получается, что текст уходит вниз и под картинкой много свободного места остаётся.

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

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