基础XY网格-在不影响grid-x高度影响布局的情况下更改中小型单元的层次结构

Question

我目前正在尝试使用源排序将图像移到小屏幕上2个元素的左侧，并在其下方放置一个全角元素。

然后我想将图像移到中等屏幕及以上屏幕上所有3个元素的右侧。

我的问题是在中等屏幕上，图像会扩大grid-x行的高度。

您可以在此处看到问题：

https://codepen.io/jfitzsimmons/pen/rNBZLVV

我很难弄清楚完成这项工作的逻辑。我试图避免使用可见性，因为我不想重复代码。有人可以帮忙吗？这是我的标记：

<div class="grid-x grid-padding-x">
  <div class="small-8 cell small-order-2 medium-order-1">
    <p class="uppercase green-text bold-text">
      Title 1
    </p>
    <p class="bold-text">
      Sub heading 1
    </p>
    <p class="bold-text">
      Sub heading 2
    </p>
  </div>
  <div class="small-4 cell text-center small-order-1 medium-order-2">
    <img src="https://via.placeholder.com/300" />
  </div>
  <div class="small-12 cell small-order-3 medium-8">
    <p>
      I want this to be higher up when the screensize is at medium or larger.  I don't want to have all of this space above.
      </p>
      <p>
      Phasellus nec eleifend ex. In porta, sapien quis ullamcorper tincidunt, nibh lectus dignissim diam, at venenatis neque orci nec metus. Vivamus faucibus lectus mattis augue aliquam, nec tempor libero aliquet. Fusce sit amet
      rutrum justo.
    </p>
  </div>
</div>

我的大脑有点炸了，但是也许有一种方法可以将源顺序放在grid-x和grid-y元素本身上。