Question

我的网站为我的网站使用了基础前端框架，因此它是针对移动设备的响应式设计。

我遇到了一个问题，即在手机上使用时我的网站上显示数据的方式。

我希望我网站上的侧边栏小部件内容显示在网站移动版上的项目（健康俱乐部）上方。看到我的侧边栏小部件有一个过滤器部分，所以我真的需要在（健康俱乐部）之前显示。

问题：我需要更改哪些内容才能显示侧栏小部件？道歉我对CSS很好，但这对我的技能水平非常高级。

这是网站:(个人电脑版） http://s10.postimg.org/cl1n43w95/website.png

以下是该网站在移动设备上的显示方式。注意我的项目如何全部位于侧边栏上方。我想在项目上方添加侧边栏小部件：

http://s27.postimg.org/8adw402gz/screenshot2_sidebarunder_items.png

以下是我认为需要更改的基础代码：

/* #Foundation Style
================================================== */
.row .column, .row .columns{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box;        box-sizing: border-box; }

.container{ margin: 0px auto; max-width: 960px; padding: 0px 20px; }
.container.wrapper{ margin: 0px auto; max-width: 1000px; padding: 0px; }

.row { width: 1140px; max-width: 100%; min-width: 727px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -10px; }

.column, .columns { float: left; min-height: 1px; padding: 0 10px; position: relative;        margin-bottom: -12px; }

.row .one { width: 8.333%; }
.row .two { width: 16.667%; }
.row .three { width: 25%; }
.row .four { width: 33.333%; }
.row .five { width: 41.667%; }
.row .six { width: 50%; }
.row .seven { width: 58.333%; }
.row .eight { width: 66.667%; }
.row .nine { width: 75%; }
.row .ten { width: 83.333%; }
.row .eleven { width: 91.667%; }
.row .twelve { width: 100%; }

.row .one-fifth{ width: 20%; }
.row .one-sixth{ width: 16.667; }

img{ max-width: 100%; height: auto; }
img { -ms-interpolation-mode: bicubic; }
object, embed { max-width: 100%; }

/* #Foundation Mobile Size
================================================== */
@media only screen and (max-width: 767px) {
    body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none;
        width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0;     padding-right: 0; }

.container{ margin: 0px auto; max-width: 420px; }
.container.wrapper{ margin: 0px auto; max-width: 460px; padding: 0px; }

.row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }

.row .column, .row .columns { width: 100%; float: none; }

.column:last-child, .columns:last-child { float: none; }
[class*="column"] + [class*="column"]:last-child { float: none; }

.column:before, .columns:before, .column:after, .columns:after { content: ""; display:         table; }
.column:after, .columns:after { clear: both; }
}

/* #Custom Style
================================================== */

/*--- header area ---*/
.header-wrapper .responsive-menu-wrapper{ display: none; }

/* #Custom Mobile size
================================================== */
@media only screen and (max-width: 767px) {
/*--- header area ---*/
.header-wrapper .logo-wrapper{ float: none; }
.header-wrapper .navigation-wrapper{ display: none; }
.header-wrapper .responsive-menu-wrapper{ display: block; }     
.header-wrapper .top-search-form{ display: none; }

div.logo-right-text{ float: none !important; text-align: center !important; 
    padding-top: 0px !important; padding-bottom: 20px; }

div.feedback-wrapper{ display: none; }

div.top-navigation-left, div.top-navigation-right{ text-align: center; float: none; }
div.social-wrapper { float: none; display: inline-block; margin-top: 5px; }

/*--- single page ---*/
div.single-portfolio .port-media-wrapper { max-width: 100%; width: 100%; float: none;     margin-bottom: 20px; }
div.single-portfolio .port-content-wrapper { overflow: visible; }
div.single-portfolio .port-nav .port-prev-nav, div.single-portfolio .port-nav .port-next-    nav { margin-bottom: 15px; }

/*--- page item ---*/
div.gdl-blog-medium .blog-media-wrapper { margin-right: 0px; width: 100%; }
div.gdl-blog-medium .blog-context-wrapper { overflow: visible; }
div.price-item{ margin-bottom: 20px; }

div.column-service-row{ border-left-width: 0px; }

/*--- shortcode ---*/
.shortcode1-4, .shortcode1-4.last, 
.shortcode1-3, .shortcode1-3.last, 
.shortcode1-2, .shortcode1-2.last,
.shortcode2-3, .shortcode2-3.last, 
.shortcode3-4, .shortcode3-4.last,
.shortcode1-5, .shortcode1-5.last, 
.shortcode2-5, .shortcode2-5.last,
.shortcode3-5, .shortcode3-5.last, 
.shortcode4-5, .shortcode4-5.last{ width: 100%; }

/*--- slider ---*/
.flex-caption{ display: none !important; }
.nivo-caption{ display: none !important; }
.anythingSlider{ display: none !important; }

/*--- footer ---*/
div.copyright-left, div.copyright-right{ float: none; text-align: center; }
}

谢谢大家，对不起，如果我不是很清楚。

Answer 1

使用基础网格，您可以更改列的顺序，这可能就是您要查找的内容。

http://foundation.zurb.com/docs/components/grid.html

寻找＆＃34;来源订购＆＃34;

那应该引导你走上正确的道路。否则，如果您发布相关标记会很有帮助。

第二次尝试

如果您查看第二页的来源http://goo.gl/ijZ1JF，您会发现三个要素：

<div class="row single page"> ...

<div class="eight column columnopaddingright"> ...

<div class="four column  columnopaddingleft"> ...

如果你为了这样的测试目的修改它们，你会得到想要的结果吗？

<div class="row single page" style="display: table;">

<div class="eight column columnopaddingright" style="display: table-footer-group;">

<div class="four column  columnopaddingleft" style="display: table-header-group;">

CSS响应移动问题 - 基础前端框架（ZURB）

1 个答案:

第二次尝试