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

Question

考虑到移动设备优先，我有一个 html 结构，垂直堆叠 3 divs（在移动设备上）。

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 class 将其移到左侧，但它清除了 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>

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

Order right column between two divs on left column in Foundation

css

zurb-foundation

zurb-foundation-5