基础：关于源订购（没有柔性网格）

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

你可以使用visivilty类......但是，flexbox的设计非常适合......从这里查看最后一个例子：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

而且，你不需要中等12级或小型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>