使用CSS Grid在移动设备上重新定位div

我有一个网格布局，它是几个复制块以及一个伴随的图像（链接到jsfiddle）。

<div class="story-body">

    <div class="body-copy">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar, elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
    </div>

    <div class="regular-photo">
         <img src="http://placehold.it/500x500">
    </div>


    <div class="body-copy">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar, elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
    </div>

    <div class="regular-photo">
         <img src="http://placehold.it/500x500">
    </div>

</div>

它完美地显示在桌面上-图像在随附的复印块顶部旁边对齐。问题是，在移动设备上，图像显示在主体复制部分之后，考虑到我以这种方式组织了HTML，这是有道理的。

.story-body {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: row;
}

.body-copy {
    justify-self: center;
    max-width: 80%;
}

.regular-photo {
justify-self: left;
}

@media screen and (max-width: 500px) {
    .story-body {
    grid-template-columns: 100%;
    }
    .regular-photo {
    justify-self: center;
    }
}

有没有一种方法可以将.regular-photodiv定位.body-copy在移动设备上的div之前，而无需重新组织HTML？