CSS -адаптивная мобильная проблема - Front -End Framework (Zurb) ⇐ Html

[Anonymous]

Мой веб-сайт использует фронтальную структуру Foundation для моего веб-сайта, так что это отзывчивый дизайн для мобильных устройств. См. У моего виджета боковой панели есть раздел фильтра, поэтому мне действительно нужно, чтобы отобразить до (здоровья). Приносим извинения, я в порядке в CSS, но это довольно продвинуто для моего уровня квалификации.

вот веб -сайт: (версия для ПК)
http://s10.postimg.org/cl1n43w95/website.png>
weebsite. Обратите внимание, как все мои предметы находятся над боковой панелью. Я хотел бы, чтобы виджет боковой панели над элементами:

http://s27.postimg.org/8adw402gz/screen ... _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; }
}
< /code>

Спасибо, ребята, извините, если я не очень ясно. < /p>

Подробнее здесь: https://stackoverflow.com/questions/266 ... ework-zurb