improved product arrangement for x-small screens

bootstrap's xs screen size is quite wide compared to our smallest screen
width, so i allowed for more columns at the wider end, and at the
smaller end, made columns narrow with space on both sides. at the
smallest end, columns fill the width of the page.