Para mantener la solución original sugerida usando column-span en lugar de una imagen posicionada absoluta.

Aquí está mi solución sugerida para esto. Lo único que necesita saber es la altura de la imagen, esto podría no ser ideal, pero creo que esta solución es lo más cerca de perfecto como se pone.

No se utiliza javascript para calcular las columnas, no se necesitan elementos o clases añadidos para que funcione. Dividí el bloque de texto en múltiples paráfrasis ya que creo que es una forma más correcta de hacerlo. Sin embargo, esta solución no depende de los múltiples párrafos, podría eliminarlos y seguiría funcionando igual. Solo agregué párrafos al azar para obtener un texto más natural.

Las siguientes son las partes importantes.

article{
  column-count: 4; /* Create 4 columns */

  img {
    /* For an image to work with column-span it needs to be a 
       block element */   
    display: block;

    /* Now we can let the image expand to all columns */
    column-span: all;

    /* We'll need to give the image a fixed height.
       A problem here is if we want a responsive layout. This wont 
       respect the aspect ratio of the image. That could be solve
       by only allowing an adoptive layout and set hard heights
       on the image. */
    height: 200px;

    /* Give it some margin to the columns under it */
    margin-bottom: 25px;

    /* Now comes the trick, first we want to push the image one 
       column to the right, that will be 25%, we're also adding
       some extra spacing to make it look nicer */
    margin-left: calc(25% + 10px); 

    /* Since we've pushed it one column to the right we only
       want it to take up 75% (3/4) of the total width. */
    width: calc(75% - 10px);
  }

  /* Lastly we want to give the first paragraph a negative margin
     equal to the image height. This will move the first column
     up to align with the top of the image. */
  p:first-of-type { margin-top: -($imageHeight+25); }
}

El ejemplo completo y funcional

/* Just to make it look a little nicer */
body {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  padding: 1em;
}

article {
  max-width: 860px;
  -webkit-column-count: 4;
     -moz-column-count: 4;
          column-count: 4;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}
article img {
  display: block;
  -webkit-column-span: all;
     -moz-column-span: all;
          column-span: all;
  height: 200px;
  width: calc(75% - 10px);
  margin-bottom: 25px;
  margin-left: calc(25% + 10px);
}
article p {
  margin-bottom: 1.3em;
}
article p:first-of-type {
  margin-top: -225px;
}

@media screen and (max-width: 800px) {
  article {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
  article p:first-of-type {
    margin-top: 0;
  }
  article img {
    margin: 0 0 30px;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 600px) {
  article {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
  }
}

<article>
  <img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" />
  <p>Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum
    iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
  <p>Nam liber tempor cum soluta. nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam.</p>
  <p>Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi.</p>
  <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
    ad minim veniam.</p>
  <p>Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi.</p>
  <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.</p>
</article>

Ejecute la demostración en modo de pantalla completa para ver las columnas receptivas.

En un lado no, en realidad puede abarcar imágenes sin agregado envolturas como se ve en mi ejemplo.

Para hacerlo un poco más agradable también agregué dos consultas de medios. El diseño irá de 4 a 2 a 1 columna en función del ancho de la pantalla. La parte agradable de mantener la imagen como el primer elemento es que en pantallas más pequeñas se mostrará primero.

También he añadido un ejemplo de codepen de cómo se vería escrito en scss con la altura de la imagen como variable y usando autoprefixer para mantener el css un poco más limpio. Ya que estamos usando la columna por supuesto limitar el soporte del navegador, pero que parecía ser una solución aceptable.

Http://codepen.io/stenehall/pen/yYEEva?editors=110

Por favor, no es que esta solución solo funciona en Chrome y Safari, pero no Firefox. Dado que firefox aún no es compatible con column-span https://developer.mozilla.org/en-US/docs/Web/CSS/column-span . De acuerdo con ese artículo, Internet Explorer debería funcionar, pero no lo he probado.

Creo que dividir el texto en dos bloques es actualmente la única solución. Bascially, flotar la imagen a la derecha, colocar un primer diff columna única con el primer texto al lado de ella y luego colocar un segundo diff de cuatro columnas con el texto restante debajo de ella.

Esta solución funciona en Firefox!

HTML:

<div>
    <img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" class="imageSpanning3Columns"/>
</div>
<div>
    <p class="singleColumns border">Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in </p>
</div>
<div>
    <p class="quatroColumns border">vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.

CSS:

.quatroColumns{             /* css multi column 4 columns */
    -webkit-column-count: 4; -webkit-column-gap: 20px; /* Chrome, Safari, Opera */   
    -moz-column-count: 4; -moz-column-gap: 20px; /* Firefox */
    column-count: 4; column-gap: 20px;
    width: 860px;
    font-size: 15px;
    text-align: justify;
}

.singleColumns{             /* css multi column 4 columns */
    -webkit-column-count: 1; -webkit-column-gap: 20px; /* Chrome, Safari, Opera */   
    -moz-column-count: 1; -moz-column-gap: 20px; /* Firefox */
    column-count: 1; column-gap: 20px;
    width: 198px;
    font-size: 15px;
    text-align: justify;
}

.singleColumns:first-child:first-letter {
    float: left; font-size: 67px; margin:  7px 5px -10px 20px;
}

.imageSpanning3Columns{     /* align to top-right */
    width:640px;
    top: 0 px;
    float:right;
}

.border{
    border: solid 0px;
    margin: 0px;
}

Aquí hay un violín con un ejemplo: http://jsfiddle.net/1ye9tyhq /

Hola: Por favor, encuentre un ejemplo de mi respuesta AQUÍ

CÓDIGO HTML

<div id="news_paper">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
    </p>
    <img id="news_paper_image" src="http://lorempixel.com/600/275/">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>   
</div>

CÓDIGO CSS

#news_paper{
  margin: 7rem auto;
  width: 70%;
}

#news_paper > p{
  width: 22%;
  float: left;
  padding: 1%;
  text-align: justify;
}

#news_paper > p:first-child{
  margin-top: -1rem;
}

p{
  font-family:sans-serif;
}
#news_paper > p:first-child::first-letter{
  font-size: 2.5rem;
  color: whitesmoke;
  float: left;
  margin-top: -0.25rem;
  padding: 0 0.25rem 0.25rem;
  background-color: tomato;
}

#news_paper_image{
  width: 70%;
  float: left;
  margin-left: 1%;
}

GRACIAS T04435