使用 Foundation 网格将堆积柱放在其他柱下方

Question

有没有办法使用 Foundation 的网格执行以下操作？

On Large Screens
################ ################
#              # #              #
#              # #    Col 2     #
#              # #              #
#              # #              #
#    Col 1     # ################
#              # #              #
#              # #    Col 3     #
#              # #              #
#              # #              #
################ ################

On Medium Screens
################ ################
#              # #              #
#              # #    Col 2     #
#              # #              #
#              # #              #
#    Col 1     # ################
#              # 
#              # 
#              # 
#              # 
#################################
#                               #
#            Col 3              #
#                               #
#                               #
#################################

我正在使用的代码。

<div class="row">
  <div class="large-6 columns">
    <p>Column 1</p>
  </div>
  <div class="large-6 columns">
    <div class="row">
      <div class="large-12 columns">
        <p>Column 2</p>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <p>Column 3</p>
      </div>
    </div>
  </div>
</div>

关于执行此操作的最佳方法有什么想法吗？ Col 2 中的内容将有 text-align: right; 并且不会占用太多 space 但是 Col 3 中的内容将比 Col 2 中的内容宽得多所以它会被换行，这就是设计师试图通过将 col-3 放在下面来避免。

Answer 1

如果你能像这样将列放在单行容器中，这是可能的..

<div class="row">
  <div class="large-6 small-6 columns">
    <p class="tall">Column 1</p>
  </div>
  <div class="large-6 small-6 columns">
    <p>Column 2</p>
  </div>
  <div class="large-6 small-12 columns">
    <p>Column 3</p>
  </div>
</div>

http://codeply.com/go/rZuxJWtm98

使用 Foundation 网格将堆积柱放在其他柱下方

Dropping a stacked column below others using Foundation grid

html

css

zurb-foundation