How to Implement style in html (col) to rails

Question

I had a problem when I want to implement my html to rails previously I've made a catalog with 3 columns on the desktop display and 2 columns on a mobile display like this

in desktop display my catalog looks like this

[1] [2] [3] [4] [5] [6] 

but when I change to mobile view, they looks like this

[1] [2] [3] [4] [5] [6] 

previous syntax that I use to html exactly like the links above the question is where should I put

<div class="clearfix visible-xs-block"></div> 

and

<div class="clearfix visible-md-block"></div> 

do I have to add "IF" or something else in the loop to add the code? this is my view syntax

<div class="row-store"> <% @games.each do |game| %> <div class="con-space col-xs-6 col-md-4"> <%= image_tag(game.image_url) %> <h3><%= game.title %></h3> <div> <span>Platform: <%= game.platform.name %></span><br/> <span>Price: <%= game.price %> </span> </div> </div> <% end %> </div> 

thx

Answer 1

First put 'row' class and inside it loop the 'col-md/sm-*' divs through rails and add class 'mg-btm' to 'col' div. I would recommend not using row-store class with floats or clear css, unless it is for some color styling!

Hope This helps!!

<style> .mg-btm {margin-bottom: 15px;} </style> <div class="row row-store"> <% @games.each do |game| %> <div class="col-xs-6 col-md-4 mg-btm"> <%= image_tag(game.image_url) %> <h3><%= game.title %></h3> <div> <span>Platform: <%= game.platform.name %></span><br/> <span>Price: <%= game.price %> </span> </div> </div> <% end %> </div> 

Answer 2

I haven't worked with rails yet but the logic should be the following:

<div class="row-store"> <% i = 0 %> <% @games.each do |game| %> <div class="con-space col-xs-6 col-md-4"> <%= image_tag(game.image_url) %> <h3><%= game.title %></h3> <div> <span>Platform: <%= game.platform.name %></span><br/> <span>Price: <%= game.price %> </span> </div> </div> <% if i != 0 %> <% if i % 2 == 0 %> <div class="clearfix visible-xs-block"></div> <% elsif i % 3 == 0 %> <div class="clearfix visible-md-block"></div> <% end %> <% end %> <% i++ %> <% end %> </div>