I see that you did this manually. But "Neat bourbon" tags (i.e. span-columns) should do this. See their showcase in homepage http://neat.bourbon.io/
Thats why we are importing their gird.