【Shopify】セクションで複数列を使った際のＰＣとスマホでテキスト位置を変更したい

今回実装したいのは、Shopifyのセクションにある「複数列」の見え方を変更です。
簡単に言うと、複数列のPCでの見え方が左画像の場合、右の上部に見出しテキスト、下部に説明テキストになります。SPで見ると、上から、画像、見出し、説明となる。SPでは見出し、画像、説明にしたいのです。下記が実装したい内容。

今回修正するliquidはsection/multirow.liquidになります。
まずは、52行目あたりにある下記を見つけます。

<div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.image_layout contains 'alternate' %}{% cycle odd_class, even_class %}{% else %}{{ odd_class }}{% endif %}"> 

上記コードの下に下記コードを追加します。

  
<div class="sp-only">
            {%- if block.settings.caption -%}
                <div class="image-with-text__text image-with-text__text--caption caption-with-letter-spacing caption-with-letter-spacing--medium">
                  {{ block.settings.caption | escape }}
                </div>
              {%- endif -%}
              {%- if block.settings.heading -%}
             <h2 class="image-with-text__heading {{ section.settings.heading_size }} rte">
                  {{ block.settings.heading }}
                </h2>
              {%- endif -%}
          </div>

次に、90行付近にある、下記コードを打ち換える

  <h2 class="image-with-text__heading {{ section.settings.heading_size }} rte">

下記に変更

<h2 class="image-with-text__heading {{ section.settings.heading_size }} rte pc-only">

最後に{% schema %}の上に下記を追加。

{% style %}
  .sp-only { display:block; }
  .pc-only { display:none; }
  @media only screen and (min-width: 750px) {
   .sp-only { display:none; }
   .pc-only { display:block; }
  }
{% endstyle %}

これで、希望のレイアウトになるはず。とShopifyのコミュニティーで教わりました。
だがしかし、私の場合はなぜか行間に大きな幅ができてしまって、思い通りにならない。おそらく、どこかでスタイルシートが干渉しているに違いない。とはいえ、探すことができなかったので、苦肉の策をとりました。

上部のXXXのソースを強制的に効くように変更。

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  } 

上記ソースを下記に打ち換えました。

  @media only screen and (max-width: 749px) {
  .image-with-text__content {
    padding-top: 5px  !important;;
    padding-bottom: 5px  !important;;
  }
  .image-with-text__text {
    margin-top: 10px  !important;;}
 .image-with-text__heading {
   margin-bottom:20px  !important;; }
 .image-with-text__text--caption {
   margin-bottom:5px  !important;; margin-top:50px  !important;; }
  }  

これで、一応主通りの下記にはなりました。