Basically, a row has a default number of equal width spans. Columns take up a number of spans. When you create a row, it comes with a column automatically set to 12 spans (the entire width).
In the desktop view, you have the columns set to 4 spans for your row with the three pictures. That means a column takes up 4/12 widths of the row. At a breakpoint 814 or 812px, you changed the span width to 6. But - with three columns, you get two columns across, and a third column underneath to the left.
At the 5xx px breakpoint, the column span was set to 8. So the width of the column will be 8/12 of the row. So, the columns will be about 75% of a row width. Only one column can be put into a row horizontally, so the columns start to stack. (Remember a row - can "line wrap" and does not necessarily end on the same horizontal "line" on your screen. A row could have ten columns that each have a span of 6 - so that the row actually wraps 4 times after going across the screen for the first two columns.
The simple solution at that breakpoint to set the spans back to 12, then you can adjust paddings and margins for that breakpoint. But for the tablet view, something different will be needed if you want it centered. For that column that in underneath the other two, you will want to "push" it to the center. It is 6 spans wide. So there are 6 "empty spans" of width yet in the row. In the layout, push the column three spans using the dropdown for push. It will now be centered. You may need to reset the "push" to 0 for the smaller breakpoint. What the push does, it move the column over to another span (and vice versa for pull). There are other complicated used for push and pulls. There are also other ways to center content, but if you are still learning about column spans, just stick to using spans and the occasional push/pull for now.
http://www.coffeecup.com/help/articles/managing-the-responsive-grid-with-layout-maker/
http://www.coffeecup.com/help/articles/responsive-actions---the-stack/
