基础：关于源排序（无弹性网格）

Question

我有一个包含内容和侧边栏的 3 列网格。在中小型设备上，每个设备占用 12 列。见cdpn.io/anon/pen/bqENqG。

我需要侧边栏来在这样的中小型设备上发表文章：

或者侧边栏和文章可以在 HTML 中交换，因为小屏幕上的侧边栏应该排在最后（我正在构建这个网站移动优先）。

我认为正确的 HTML 结构是：

<div class="row">
  <div class="small-12 medium-12 large-9 columns" style="background: #B9B9B9;">CONTENT</div>
  <div class="small-12 medium-12 large-3 columns" style="background: #919191;">ARTICLES</div>
  <div class="small-12 columns" style="background: #AAA4A4;">SIDERBAR</div>
</div>

使用上面的代码，如何在大屏幕上显示右侧的Sidebar（左侧的Content 和Articles）？

基本上，我希望它看起来像这样：

内容 |侧边栏
文章

在这种情况下这可能与拉/推有关吗？

我正在使用 Zurb Foundation，并在网格中的源排序上找到了 this link，这可能会有所帮助。

请帮助我，提前谢谢你！

Answer 1

您可以使用可见性类...但是，flexbox 的设计非常适合...查看此处的最后一个示例：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

而且，你不需要 medium-12 类或 small-12 类

<div class="row">
      <div class="large-9 column" style="background: #B9B9B9;">CONTENT</div>
    <div class="column large-3 show-for-large" style="background: #AAA4A4;">SIDERBAR</div>
      <div class="columns" style="background: #919191;">ARTICLES</div>
      <div class="columns hide-for-large" style="background: #AAA4A4;">SIDERBAR</div>
    </div>