Unfortunately, the way that floats work, this is currently not possible with the HTML you have. Fortunately, the fix is fairly simple: a wrapping <div>
!
Check out the updated SassMeister gist for the full solution.
Basically, what you need to do to accomplish this is wrap .follow
and .newsletter
in a wrapping div that has no properties until your breakpoint where you need those two items stacked in the middle. Then, instead of using Singularity to position those items, they're simply 100% width, with .follow
floating either left
or right
, with .newsletter
clearing the direction that .follow
floated (or both)
. Finally, use Singularity to position the containing <div>
. This will stack them inside of that area and allow .contact
and .newsletter
to be positioned normally.