Responsive design 我能在基础上使用推挽/源排序来实现这个布局吗？

我正在尝试使用创建一个响应性的布局，并且很难理解如何使用推拉创建一个列布局，以便在移动和桌面上正确排序内容，而不必求助于javascript或复制“隐藏小/隐藏大”分类div中的数据

按照“移动优先”的理念，假设我对活动站点有以下期望的布局：

流动电话：

12 columns
========================
[Name / Date / Location]
[Photo                 ]
[Event details         ]
[Attendees             ]
[RSVP                  ]
[Edit link             ]

桌面：

4 columns          8 columns
=============================================
[Photo     ]    |   [Name / Date / Location ]
[RSVP      ]    |   [Event details          ]
[Edit Link ]    |   [Attendees              ]

如何格式化HTML，使其在两种情况下都以正确的顺序显示

现在，我正在为手机做这件事：

<!-- note: there are many ways to create this layout -
           it could be in sets of individual rows as well -->
<div class="row">
  <div class="small-12 columns">
      <div class="namedatelocation">(name/date/location html)</div>
  </div>
  <div class="small-12 columns">
      <div class="photo">(photo html)</div>
  </div>
  <div class="small-12 columns">
      <div class="details">(details html)</div>
  </div>
  <div class="small-12 columns">
      <div class="attendees">(attendees html)</div>
  </div>
  <div class="small-12 columns">
      <div class="rsvp">(rsvp html)</div>
  </div>
  <div class="small-12 columns">
      <div class="edit">(edit html)</div>
  </div>
</div>

（姓名/日期/位置html）
（照片html）
（详情html）
（与会者html）
（rsvp-html）
（编辑html）

我可以在桌面上这样做：

<div class="row">
  <div class="large-4 columns">
      <div class="photo">(photo html)</div>
      <div class="rsvp">(rsvp html)</div>
      <div class="edit">(edit html)</div>
  </div>
  <div class="large-8 columns">
      <div class="namedatelocation">(name/date/location html)</div>
      <div class="details">(details html)</div>
      <div class="attendees">(attendees html)</div>
  </div>
</div>

（照片html）
（rsvp-html）
（编辑html）
（姓名/日期/位置html）
（详情html）
（与会者html）

如何以响应的方式创建此内容？到目前为止，我所能完成的最好的工作就是将内容分成“对”，并使用push-pull将每对内容放到自己的行中，push-pull用于更改行中2列的顺序。这种方法的问题在于，除了仅重新排序对的限制外，每行的高度等于该行中两列中最高的一列。这意味着在桌面布局中有大量的死区

---

有没有关于如何完成我想做的事情的想法？还是基础不可能？如果没有，一般来说，解决这个问题的正确方法是什么？

您仍然可以使用与F3中使用的类似的push和pull类。您可以阅读上的源代码排序部分。以下是解决问题的方法：

<div class="row">
      <div class="large-8 push-4 small-12 columns">
          <div class="namedatelocation">(name/date/location html)</div>
      </div>
      <div class="large-4 pull-8 small-12 columns">
          <div class="photo">(photo html)</div>
      </div>
      <div class="large-8 push-4 small-12 columns">
          <div class="details">(details html)</div>
      </div>
        <div class="large-4 pull-8 small-12 columns rsvp">
          <div class="rsvp">(rsvp html)</div>
      </div>
      <div class="large-8 push-4 small-12 columns attendees">
          <div class="attendees">(attendees html)</div>
      </div>

      <div class="large-4 pull-8 small-12 columns">
          <div class="edit">(edit html)</div>
      </div>
    </div>

注意：注意，我在两个小的12区，第四区和第五区分别添加了

rsvp

和

attenders

.row .small-12.rsvp {
    margin-top: 30px;
}
.row .small-12.attendees {
    margin-top: -30px;
}