The result falls into multiple columns using Algolia and Bootstrap 3

Question

I use Algolia instantsearch.js to search, and to display my results page, I use Bootstrap 3, and I would like the hits to be displayed in 3 columns:

qry | hit1 | hit2
    | hit3 | hit4
    | hit5 | hit6

(where qry = search query input widget), etc ..

If it is a mobile device, it should display as:

qry
hit1
hit2
hit3
etc.

Can someone help me with html / css that I can use to implement this? Thanks!

Answer 1

, bootstrap row grid layout col-{xs,sm,md,lg}-X ( ).
bootstrap , col-YY-X, YY, .
instantsearch.js widgets cssClasses, .

, , , root cssClasses .row, .col-sm-6 ( .col-md-6 .col-lg-6 , ).

, .
. JSFiddle

. , , , col-YY-X -.

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      empty: 'No results',
      item: '<div class="hit">{{title}}</div>'
    },
    hitsPerPage: 6,
    cssClasses: {
      root: 'row',
      item: 'col-lg-3 col-md-4 col-sm-6'
    }
  })
);

, item, padding , . border , margin .

, :

<div class="container-fluid">
  <div id="search" class="row">
    <div class="col-sm-4">
      <div id="input"></div>
    </div>
    <div class="col-sm-8">
      <div id="hits" class="row">
      </div>
    </div>
  </div>
</div>