Order right column between two divs on left column in Foundation - css

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">
Search
</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>