How to change vertical border in-between columns to horizontal border in-between columns on small devices.

[Smashr]

Let me apologize beforehand, I'm very new to responsive design and to Foundation, This may be a stupid question, or a question that has already been answered. I tried looking for a solution to this ... googled, browsed the extensive docs, and searched issues here on Github multiple times and couldn't find an answer.

I've been looking for a while in the docs for some kind of conditional classes that are applied to the html or body tag for different screen sizes, but could not find any.

All I was able to find were "Visibility Classes". And they would hide or show an element based on screen size.

I have four columns on the page, with a vertical border in between each (border-left / right). These render great for large screens, but on smaller screens, as the columns collapse, I need different CSS styling with no border-left or border-right, instead I need to have border-top and border-bottom, to make the border horizontally between the columns.

I'm attaching screenshots of the columns on a wide screen and a narrow screen. The wide-screen one is the desired effect for the wide screen, but as you can see, on a narrow screen the border needs to be in-between the columns (horizontally). How can I achieve this ?

I think there are easy ways to achieve this in some other frameworks that apply a specific css class to the 'body' or 'html' tag based on viewport size. And that allows designers to style such things very easily by specifying particular selectors in css like this:

.bigscreen .element {border-left:1px solid #ccc; padding:10px 0px;} .smallscreen .element {border-top:1px solid #ccc; padding:0px 10px;}

"Visibility Classes" are obviously not the solution here.

Is there such a thing in Foundation 4 ?

Wide screen Image (desired result):

Narrow screen Image (not desired result):

[mvrhov]

Just put the css to into the correct @ media section and you should be done..

[Smashr]

Thank you mvrhov ... I'll try that :)