css - Zurb Foundation 4 崩れるインラインフォーム

Question

Foundation 4 レスポンシブ CSS フレームワークのインライン フォーム要素を折りたたもうとしていますが、うまくいきません。

[ラベル] [入力] [ラベル] [入力]

に折りたたむ:

[ラベル] [入力] [ラベル] [入力]

ラベルが入力とインラインでなくても、たとえばそのすぐ上になくても問題なく機能します。

マークアップは次のとおりです。

<form>
  <div class="row">
    <div class="small-12">
      <div class="row">
        <div class="small-3 columns">
          <label for="right-label" class="right inline">Label</label>
        </div>
        <div class="small-3 columns">
          <input type="text" id="right-label" placeholder="Inline Text Input">
        </div>
        <div class="small-3 columns">
          <label for="right-label2" class="right inline">Label2</label>
        </div>
        <div class="small-3 columns">
          <input type="text" id="right-label2" placeholder="Inline Text Input">
        </div>
      </div>
    </div>
  </div>
</form>