Order right column between two divs on left column in Foundation

Question

With mobile-first in mind, I have an html structure that stacks 3 divs (when on mobile) vertically.

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>

Mobile display:

However, when on desktop, I need the middle div to be in a right column. Here's what I want:

I'm using foundation's pull-large-9 class on div 3 to get it to the left, but it clears div 2 so I end up with div 3 spaced too far below div 1.

What I'm getting:

Btw, I'm using Foundation 5 and compiling the scss. I appreciate any thoughts or input. Open to using JS but would prefer a css/html solution if possible.

Answer 1

When I had a similar issue (shown below),

This is what I did to fix it:

.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>