Loop over Images in content split

Hi I have the following problem:

I would like to include the page.media.images in my Content-Loop in an ascending manner. I Understand how to get the first one, but not the rest of the pictures. I tried it also with the slice filter and loop.index, but it did not work.

{% for column in page.content|split('<hr />') %}
<div class="content">{{ column }}</div>
<div class="image">{{ page.media.images|slice('~loop.index~',1) }}</div>
{% endfor %}

Any Suggestions?

Thanks a lot!

Niko

Well I did find a work around, but it's not nice:

{% for column in page.content|split('<hr />')  %}
{% set col = loop.index %}

<div class="row">

{% for image in page.media.images %}
{% if loop.index == col %}
{{ image }}
{% endif %}
{% endfor %}

{{ column }} </div>

{% endfor %}

If someone know a cleaner approach, that does not loop through all the pictures for every iteration, i would still be even more happy...