CSS Grid我可以在另一列上面放置一列

Question

我创建了一个博客布局CSS网格

grid-template-columns: 10fr 2fr 18fr 3fr 18fr 3fr 2fr 3fr 18fr 3fr 18fr 2fr 10fr;

并创建了三个区域

.area-content {
    grid-column: 5 / 10;
}

.area-pull-left {
    grid-column: 3 / 6;
}

.area-pull-right {
    grid-column: 9 / 12;
 }

现在我尝试通过此代码

在图像周围（右拉或左拉）浮动文本

 <div class="area-content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do       
     eiusmod tempor incidid
  </div>
  <div class="area-pull-right"></div>

但结果看起来像这样

有没有办法将图像列放在内容列上方，​​以便结果如下所示？

这是一个小提琴链接：https://jsfiddle.net/38gjosss/2/

我找到的唯一选择是将内容分为三个部分，这些部分根本没有用处：

<div class="area-content">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
   eiusmodtempor incididunt ut labore et dolore magna
</div>
<div class="area-content-left">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
   eiusmod tempor incidid
 </div>

 <div class="area-pull-right"></div>
 <div class="area-content">
     ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute    
     irure dolor in reprehenderit in voluptate velit 
 </div>