0

Ok, I'm new to Susy and I'm trying to do something that is probably very easy. On a large display I have two columns side-by-side |A|B|. When I shrink the browser down to a mobile size it stacks the columns A over B.

How would I make B stack over A? I have looked all over the place and I can't seem to find the mother load of layouts. I can read documentation all day long, but, I am a visual person. Is there a place where I can download some sample Susy grids to just mess with the settings to learn with?

I realize this is a very novice post, but, I have to start somewhere.

Thanks!

shbrantley
  • 31
  • 3
  • Thank you so much Mohit! I am new to GitHub as well so cloning people's work didn't register in my mind like it should have. – shbrantley Mar 21 '16 at 05:17

1 Answers1

0

The simplest option is to change the source order of your elements in HTML:

<div class="b">column B</div>
<div class="a">column A</div>

If b comes first in the markup, it will automatically stack on top in the browser. You can still use Susy to arrange them horizontally in either order:

.a {
  @include span(8 of 12);
}

.b {
  @include span(last 4 of 12);
}

I don't know your layout, so I'm just making up numbers there. The last keyword will push b to the right, so a can fill in on the left.

Your other option involves CSS flexbox:

Flexbox allows you to stack elements in any order, vertically or horizontally. If you want to go that direction, you should read something like this CSS Tricks tutorial. Susy and flexbox work great together, but you have to use the susy functions instead of the mixins. You can apply Susy functions anywhere flexbox expects a width, for example:

.b {
  flex-basis: span(4 of 12);
}
Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43