CSS Responsive Mobile Issue - Foundation Front-end framework ( ZURB)

Question

My website uses a Foundation Front-end framework for my website, so it's a responsive design for mobile devices.

I have an issue, with how the data is displayed on my website when used on a mobile.

I would like the sidebar widget contents on my website to display above the items (health clubs) on the mobile version of the website. See my sidebar widget has a filter section, So I really need that displayed before the (health clubs).

Question: What do I need to change to display the sidebar widget on top? Apologises I'm ok at CSS but this is pretty advanced for my skill level.

Here is the website: (PC version) http://s10.postimg.org/cl1n43w95/website.png

Here is how the website is displayed on the mobile. Note How my items are all above the sidebar. I'd like the sidebar widget above the items:

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

Here is the foundation code I believe I need to change:

/* #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; }
}

Thanks Guys, Sorry if i'm not very clear.

Answer 1

With the foundation grid you can change the order of columns, which is probably what you are looking for.

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

Look for "Source Ordering"

That should guide you on the right path. Otherwise it would be helpful if you post the relevant markup.

second attempt

If you look at the source of your second page http://goo.gl/ijZ1JF you find three elements:

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

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

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

Do you get the desired result if you modify them for testing purpose like this?

<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;">