How to arrange content in multiple columns depending on page width?

Question

css

There is a page made up on bootstrap. Holds tiles. These tiles should be arranged in several columns, so that the number of columns varies depending on the width of the page.
First I did this:

<div class="col-md-4 col-sm-4">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>
<div class="col-md-4 col-sm-4">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>
<div class="col-md-4 col-sm-4">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>

It turns out three columns, and when viewed from a mobile device, they are located one under the other into one. But you need to have two columns on the tablets. And I have no idea how to organize them.
Tell me how to do it?

Answer 1

<div class="col-md-4 col-sm-6 col-xs-6">...</div>
somehow
jsfiddle.net/u9naX

Answer 2

As you wrote, using media queries will not work, you can only do this:
1 2 3
4 5 6
...
1 2
3 4
...
1
2
..

Answer 3

And if so ?
There you can move the slider and see how the blocks will be displayed depending on the screen size