...
XS designates how wide your column will be on vertical mobile layouts
SM is the width for horizontal mobile and vertical tablet layouts
MD is the column width for horizontal vertical tablet layouts
LG represents the width for horizontal tablet and desktop and computer layouts
Each page is composed of 12 sub-divisions (also called columns, but not to be confused with the Column object you are working with). Each of these sub-divisions represents 1/12 of the horizontal width of the page. 12 boxes creates a column that is 100% the width of the page. 3 boxes creates a column that is 25% the width of the page, so you can have 4 items side by side.
...
If you have XS and SM widths set to 12 and MD and LG widths set to 6, your column will span the whole screen on a mobile device or a vertical tablet, but it will only take up half the page on a horizontal tablet or desktop layout.
If you want to have a series of items side-by-side on a page, create columns that are 2, 3 or 4 sub-divisions wide. On mobile and tablet layouts (XS and SM), you might want to make each item take up 6 sub-divisions (2 across), while a desktop (LG) could have room for 4 across in the same space, which would be 3 sub-divisions.
As a rule, you should always be using the same or more boxes in your XS and SM layouts than your MD and LG layouts. While there is no “perfect formula,” err on the side of readability on mobile and tablet for all layouts.
What About Height?
...