Question

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

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

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

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

谢谢

编辑：

在基础5中有一个叫做“来源订购”的东西，我认为它可以解决类似问题，但不是我的。

这个解决方案（贝娄）对我有用，但我还在寻找更好的东西。它基于创建两个具有相同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;   
}

欢迎任何不同的解决方案

Answer 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

基础5：响应布局中的列顺序问题（包括演示）

1 个答案: