Foundation 5：响应式布局中的列顺序问题（包括演示）答案

【问题标题】：Foundation 5 : Columns order issue in responsive layout (demonstration included)Foundation 5：响应式布局中的列顺序问题（包括演示）
【发布时间】：2014-03-21 17:21:22
【问题描述】：

这是我在这里的第一个问题，我希望我能找到答案/解决我的问题。

我实际上是在使用 Foundation 作为我的移动优先电子商务网站的框架，我想知道如何使这种行顺序：https://cloudup.com/cKSc66C6Mwt

第 1 部分实际上是产品的标题。第 2 部分是带有缩略图轮播的滑块（Orbit Slider）。 Par 3 是对产品的描述。

我在 Foundation 的文档和论坛中寻找答案，所描述的单一解决方案是使用媒体查询实现这一点，但没有成功，所以我想知道是否有任何替代解决方案。

谢谢

编辑：

foundation 5 中有一个叫做“Source Ordering”的东西，我认为它可以很好地解决类似的问题，但不是我的。

此解决方案（如下）对我有用，但我仍在寻找更好的解决方案。它基于创建两个具有相同 id 和相同标题的 div（创建具有相同 id 的两个 div 不好，我知道..）并使用选项：hide-for-small 和 show-for-small

看看这个：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
    <div class="row" style="padding:10px;">
        <div class="large-4 show-for-small columns" id="title"></div>
        <div class="large-4 columns" id="slider"></div>
        <div class="large-8 hide-for-small columns" id="title"></div>
        <div class="large-8 columns" id="description"></div>
    </div>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

还有 CSS：

 #title { position: relative;
         background-color: #755172;
         height: 50px;
}

#slider { position: relative;
          background-color: #aa6ca5;
          height: 250px;    
}

#description { position: relative;
               background-color: #d8afd5;
               height: 200px;   
}

欢迎任何不同的解决方案

【问题讨论】：

要获得帮助，您需要尝试一下并将代码粘贴到此处。

标签： html css responsive-design zurb-foundation

【解决方案1】：

<div class="row" style="padding:10px;">
    <div class="small-12 large-6 columns">      
        <div class="small-12 columns hide-for-small-only" id="slider">2</div>
        <div class="small-12 show-for-small-only columns" id="title">1</div>
    </div>
    <div class="small-12 large-6 columns">
        <div class="small-12 hide-for-small-only columns" id="title">1</div>
        <div class="small-12 show-for-small-only columns" id="title">2</div>
        <div class="small-12 columns" id="description">3</div>
    </div>
</div>

这里是代码。另一个不错的选择是使用 flexbox 技术。一个很好的例子描述了here.

但请记住，IE 从 10 开始，Firefox 直到 28 等都不完全支持 flexbox。

【讨论】：

谢谢，这里唯一遗漏的是第 8 行中的 id="slider" 而不是 id="title"。我认为 flexbox 是一个好方法，但我的用户见解告诉我我仍然坚持使用 IE。所以我只想使用隐藏/显示选项。再次感谢