Обтекание содержимого публикации несколькими столбцами вокруг показанного изображения, охватывающего несколько столбцов

Question

У меня есть клиент, который просит, чтобы его записи в блоге выглядели так:

Я могу довольно легко заставить текст обтекать изображение, но проблема в том, что в нем есть несколько столбцов ... они не оборачиваются, как обычный текст.

Я пробовал следующее:

Вот jsfiddle с переносом текста https://jsfiddle.net/bynxaudio/jktx9mrc/

#featured-image{
  background: url(https://i.imgur.com/oOjQ7bD.jpg);
  background-size: cover;
  background-position: center;
  width: 63%;
  height: 300px;
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}

#post-content{
  text-align: justify;
}

и вот пример того же кода, но текст имеет 3 столбца https://jsfiddle.net/bynxaudio/L53wpjyx/3/

#featured-image{
  background: url(https://i.imgur.com/oOjQ7bD.jpg);
  background-size: cover;
  background-position: center;
  width: 63%;
  height: 300px;
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}

#post-content{
  text-align: justify;
  column-count: 3;
}

Единственное другое решение, которое я могу придумать, состоит в том, чтобы создать два элемента div для содержания и разделить текст на массив, а затем поместить каждый элемент массива в каждый из его соответствующих элементов div, например # post-content-1 и # post-content-2 в этом примере.

Спасибо за вашу помощь. Я очень ценю это.