You'll have to change a couple things to do 4 in a row:

<ItemsRepeaterMarkup itemsPerGroup="4"><![CDATA[<div class="row icon-blocks__row flex-children flex-stretch">$_Items[0]_$$_Items[1]_$$_Items[2]_$$_Items[3]_$</div>]]></ItemsRepeaterMarkup>

and

<div class="col-md-3 flex-children flex-stretch fb-wrap">

The DIV col-md-3 may depend on your skin CSS. So play with that. There may be padding and margin tweaks to make as well. I'd copy the solution with a new name and GUID, instead of modifying the stock version.

And SuperFlexi caches so after making a markup change edit one of the items in the solution which seems to clear the cache. Make sure your changes are taking effect before you pull your hair out making changes and nothing is happening.

Hi Sandy,

The intended purpose of icon-blocks-base.css is to include any styles that are required for the proper display of the SuperFlexi Solution. That said, we've assumed that people are working with skins built off of our Framework, and that means they'd already include styles for the bootstrap grid ("col-") or flexbox grid ("fb-") classes, so we don't normally include them there. It is best to keep your custom styles in style.css because icon-blocks-base.css may be overwritten if you update to a newer version of the solution - particularly if the solution you're using is located in /data/SuperFlexi and not in /data/sites/#/SuperFlexi, as the former may be overwritten whenever you update mojoPortal. This is likely why Eric suggested earlier that you copy the solution and change the name and GUID, as that will prevent overwrites regardless of location.

As for a better way to style things, it depends. If your skin already includes the bootstrap / flexbox grids, you ought to be able to achieve a 4 column layout without custom CSS at all - you would just change the classes in the .sfMarkup file as Eric already suggested (to clarify, this is located just a bit below the ItemsRepeaterMarkup change you already made in the .sfMarkup).

If your skin doesn't support those grids, the solution you have should work fine as long as you don't care too much about different sized screens. If you look on a phone, you probably don't want the icon blocks to be in a row there. If you are concerned with this, the following CSS should offer a starting point to making the solution mobile friendly:

/* Mobile styles are the defaults, wider styles overwrite / add to them. */
.icon-blocks-module .icon-blocks .row div.flex-children {
	text-align: center;
}

/* Simple breakpoint at 768px. Your styles will now only apply to screens
   768px in width and above, leaving the phone styles to be default 100% blocks.
   You may want to adjust the 768 value depending on your needs. */
@media (min-width: 768px) {
	.icon-blocks-module .icon-blocks .row div.flex-children {
		width: calc(25% - 30px);
		float: left;
		padding-left: 15px;
		padding-right: 15px;
		text-align: center;
	}
}

There are of course many ways to accomplish anything in CSS, in my experience usually the "better" one is just whichever one solves your problem in the fewest lines of code. So if your site isn't adapted for mobile at all, don't bother adding a media query, and if your site uses bootstrap / fb-grids already, avoid adding any new CSS by utilizing them properly.

Hope this helps!