product category 4 instead of 3 images per row

i have tried much to make this work with no success.
I added css as below which changed the list and grid. Now it is not even changing the grid. I want to display 4 items per row instead of 3. hope someone can share some feedback. thanks.
.product-layout {
width:25%;
}

i just noticed that the stylesheet is stuck in cache or something down that line. simple task that has driven me crazy. when product-thumb{} was changed there was space in between the columns and the 4th item did no align on the first row.

more searching around i noticed that when clicking grid view in product category it does not change this line of code to grid <div class="product-layout product-list col-xs-12"> so in the common.js this line of code does not get executed $('#grid-view').click(function() which in line does not give me grid to style.

well, <div class="product-layout product-list col-xs-12"> just switches to full width listing
in the smallest Screen 'XS' Resolution, where it makes not much sense, to display Products
in Grid View anyway. You have to set your category.tpl grid-view to something like:
<div class="col-lg-3 col-md-3 col-sm-4"> (would create 4 Items per Row in 1024+ px-view)
to probably make it work best in all resolutions.
Good Luck
Ernie

yes thanks i have played around with the <div class="product-layout col-lg-2 col-md-2 col-sm-6 col-xs-12"> changing the col-lg and md to 1, 2 3 and 4. what i am trying to achieve is having 4 products per row with the bestsellers column to the right of the 1st row. applying col-lg-2 i get 5 products per row instead of the 4 i want plus the bestsellers drops to a new row on the left side when i want it to the right of the 1st row and subsequent 4 products dropping to a new row so on. anyone know how to achieve this?