在Foundation的左列中的两个div之间排序右列

Question

首先考虑移动设备，我有一个html结构，可以垂直堆叠3个div（在移动设备上）。

JSFiddle：https://jsfiddle.net/danbrellis/mozez66k/1/

  <div class="row">
    <div class="small-12 large-3 columns">
      <div class="panel small-12 columns googleMapFormContainer">
        <h3 class="googleMapFormContainer-title">Find a Group Near You</h3>
        <form class="googleMapForm" id="near-group-search">
          <div class="row">
            <div class="small-6 large-6 columns">
              <label>ZIP Code
                <input id="zip" type="text" name="zip" placeholder="ZIP Code" />
              </label>
            </div>
            <div class="small-6 large-6 columns">
              <label>Radius (mi)
                <select id="radius" name="radius">
                  <option value=10>10</option>
                </select>
              </label>
            </div>

          </div>
          <div class="row">
            <div class="small-12 columns googleMapForm-submitButtonContainer">
              <a href="#" id="group-search-link" class="button small default right googleMapForm-submitButton button-blue">Search</a>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="small-12 large-9 columns">
      <div style="margin-bottom: 20px;">
        <img src="http://via.placeholder.com/1071x520" />
      </div>
    </div>
    <div class="small-12 large-3 large-pull-9 columns ">
      <div class="panel">
        <p class="small-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales ex risus, ac lacinia tellus lobortis ut. Suspendisse quis tellus eget neque varius pretium. Praesent rutrum luctus volutpat</p>
        <p class="small-text">Quisque sit amet pulvinar urna. Praesent at convallis libero. Ut egestas ac orci quis sollicitudin.</p>
      </div>
    </div>
  </div>

移动显示：

然而，当在桌面上时，我需要将中间div放在右列中。 这就是我想要的：

我在div 3上使用基础的pull-large-9类来使它向左移动，但是它清除了div 2所以我最终将div 3与div 1相差太远。

我得到了什么：

顺便说一下，我正在使用Foundation 5并编译scss。我感谢任何想法或意见。打开使用JS，但如果可能的话，更喜欢使用css / html解决方案。

Answer 1

当我遇到类似问题时（如下所示），

这就是我为解决这个问题而采取的措施：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: column;
  height: 312px;
}

.box1 {
  background-color: red;
  width: 555px;
  height: 312px;
}

.box2 {
  background-color: blue;
  width: calc(100% - 555px);
  height: 200px;
}

.box3 {
  background-color: green;
  width: calc(100% - 555px);
  height: 112px;
  ;
}


/* MOBILE RWD */

@media all and (max-width: 750px) {
  .wrapper {
    flex-direction: row;
  }
  .wrapper .box1 {
    width: 100%;
    order: 0;
  }
  .wrapper .box2 {
    width: 100%;
    order: -1;
  }
  .wrapper .box3 {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>