使用 Thoughtbot Bourbon/Neat 重新排序列答案

【问题标题】：Re-ordering columns with Thoughtbot Bourbon/Neat使用 Thoughtbot Bourbon/Neat 重新排序列
【发布时间】：2014-07-21 15:23:49
【问题描述】：

我一直在寻找关于如何使用 Thoughtbot 的 Neat 网格框架在不同断点重新排序/移动列位置的最佳解决方案？

我想将标题中的元素从这里（桌面分辨率）移出：

对此（移动分辨率）：

我的 HTML 如下所示：

<header>
    <section id='header_elements'>
      <p id="chocolat_logo"><strong><a href="#"><img alt="Chocolat Restaurant Logo" itemprop="logo" src="/assets/main_logo.png" /></a></strong></p>
      <nav>
        <ul>
          <li id='home_link'>
            Home
          </li>
          <li id='menus_link'>
            <a href="/menus/evening" itemprop="menu">Menus</a>
          </li>
          <li id='drinks_link'>
            <a href="/menus/wine-list" itemprop="menu">Drinks</a>
          </li>
          <li id='contact_link'>
            <a href="#">Contact Us</a>
          </li>
        </ul>
      </nav>
      <ul id='top_contact_details'>
        <li class='social_link' id='twitter_link'>
          <a href='twitter'>
           Twitter
          </a>
        </li>
        <li class='social_link' id='facebook_link'>
          <a href='facebook'>
            Facebook
          </a>
        </li>
        <li id='top_phone''>
          <span>
            (061)
          </span>
          412 888
        </li>
      </ul>
    </section>
  </header>

并且 SCSS 看起来像这样（为了清楚起见，我删除了与实际布局无关的任何内容，如果相关，我将该标题的完整 SCSS 代码放在 this gist 上）：

header{
  @include outer-container;

  #header_elements{
    width: 100%;
    height: 100%;

    // LOGO
    #chocolat_logo{
      float: left;
      @include span-columns(3);
      @include media($mobile) {
        float: left;
        @include span-columns(6);
      }
    }

    // Main Navigation
    nav{ 
      @include media(min-width 480px){
        @include span-columns(6);
      } 
      @include media($mobile) {
        @include fill-parent();
      }

    }

    //Contact Details
    #top_contact_details{
      @include span-columns(3);
      @include media($mobile) {
        @include span-columns(6);
      }
    }
  }
}

我基本上想知道在 Bourbon/Neat 中模仿 Zurb 的 Foundation's push/pull re-order functions 的最佳/最优雅的方式是什么。

非常感谢您的任何建议/帮助！

【问题讨论】：

嗨@KatieK，很抱歉不够清晰......我刚刚编辑了我的原始问题以包含我的 HTML/CSS 代码的简化版本，以及一些屏幕截图，以使我的观点更加清晰。干杯！

标签： sass bourbon neat

【解决方案1】：

内容优先顺序

如果您想在特定视图中切换元素的显示顺序而不更改 HTML 中内容的顺序，Neat 支持方便直观的负行定位。您可以像这样轻松地在其父元素内移动每一列：

section {
  @include outer-container;
  aside {
    @include span-columns(3);
    @include shift(-12);
  }
  article {
    @include span-columns(9);
    @include shift(3);
  }
}

现在文章元素将在左侧，而旁边将在右侧。您可以像以前一样添加移动样式，以保持响应式显示的一致性：

$mobile: new-breakpoint(max-width 500px 4);

section {
  @include outer-container;
  aside {
    @include span-columns(3);
    @include shift(-12);
    @include media($mobile) {
      @include span-columns(4);
    }
  }
  article {
    @include span-columns(9);
    @include shift(3);
    @include media($mobile) {
      @include span-columns(4);
    }
  }
}

在此处查看全文：http://www.sitepoint.com/sass-bourbon-neat-lightweight-semantic-grids/

【讨论】：

【解决方案2】：

如果您发现难以检查移位位置，您可以随时检查元素并调整边距百分比以获得理想的结果。

【讨论】：

这如何回答这个问题？

【解决方案3】：

drjorgepolanco 的例子不起作用我没有找到在 Neat 中移动 cols 的有效解决方案。在 Bootstrap 框架中，您可以通过 .pull-* 和 .push-* 类轻松完成。

我对 Neat 的解决方案是

section {
  @include outer-container;
  position:relative
aside {
  @include span-columns(3);
  @include shift(9);
}
article {
  @include span-columns(9);
  position:absolute;
  }

我知道这是一个 hack，但它对我有用 }

【讨论】：