基金会的第四栏被推倒

Question

我对基金会有疑问。我有四个容器，在较大的屏幕上右侧显示侧栏。在较小的屏幕上，我想将编织到其他内容中。我的部分如下：

`<section class="column medium-8">
</section>
<aside class="column small-12 medium-4 authorDetails">
</aside>
<section class="column medium-8 small-12 shouldBeOnBottomOnSmall">
</section>
<aside class="column small-12 medium-4 authorDetails helloThere">
</aside>`

aside.helloThere在大屏幕上被推到了section.shouldBeOnBottomOnSmall旁边。我该如何解决这个问题？

Answer 1

这些列适用于为布局添加宽度，但您需要使用行来使其保持原位。该行是列的包装器。

<div class="row">
  <section class="medium-12 columns">

http://codepen.io/rafibomb/pen/jPNRVK

BTW - 如果您使用的是标签，请确保其中有标题。