在基金会的左列上的两个div之间的右列列表
问题描述：
考虑到移动优先，我有一个html结构，它可以垂直堆叠3个div（在移动时）。在基金会的左列上的两个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是在右列。 这里就是我想：
我使用基金会的拉大，9格3类来得到它的左边，但它清除DIV 2，所以我结束了DIV 3间隔远低于格1.
什么我得到：
顺便说一句，我使用的是基金会5并编译scss。我很欣赏任何想法或意见。打开使用JS，但如果可能的话更喜欢css/html解决方案。
答
当我有一个类似的问题（如下图所示），
这是我做过什么来解决这个问题：
.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>
好利用Flexbox的其'订单'属性将是一个简单的方法让你的divs _shown_按照你想要的移动顺序;这将使您能够以_DOM_的顺序让您获得桌面布局。 （请注意，虽然'order'有一些可访问性问题 - 主要是关于键盘导航和标签/焦点顺序，但这通常不是移动设备上的问题。） – CBroe
您的问题是您需要一行标记移动和一行与标记为中等和以上。介质行在一列中有1和3，在另一列中有2。 – Aibrean
我真的不想重复我的手机和媒体内容，尤其是因为Div＃2实际上是一个嵌入谷歌地图。 – danbrellis