Arrange amount of Divs/columns per row

Question

I have the responsive site, and I have a list of products. On the desktop it is OK, it is for example:

|PRODUTO 1|   |PRODUTO 2|   |PRODUTO 3|

|PRODUTO 4|   |PRODUTO 5|   |PRODUTO 6|

|PRODUTO 6|   |PRODUTO 7|   |PRODUTO 8|

On the phone, is on top of each other, It is the size of the screen:

|PRODUTO 1|

|PRODUTO 2|

|PRODUTO 3|

|PRODUTO 4| 

|PRODUTO 5|

I wanted the cell phone to be organized 2-in-2:

|PRODUTO 1|   |PRODUTO 2|

|PRODUTO 3|   |PRODUTO 4|

|PRODUTO 5|   |PRODUTO 6|

How do I organize this with css? It’s possible?

---

Editing, I got it with the following CSS:

-webkit-flex: 1 1 50%;
flex: 1 1 50%;
min-width: 1px;

Answer 1

use media query

.box{
    width: 25%;
    height: 150px;
    background: black;
    float: left;
}


@media(max-width: 600px){
    .box{
        width: 50%;
    }
}

<div class="boxs">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

https://jsbin.com/gezokoh/edit?html,css,output

Answer 2

The ideal would be to know how you set up your CSS, but for it to become a column, I imagine you should be using float: left.

From this, the ideal would be for you to put each of your Divs half the width of the screen and would be something like this. (Logically this within Media Queries specific to the desired screen size):

body {
  margin: 0;
}

.product {
  float: left;
  width: 46%;
  height: 50px;
  margin: 1%;
  line-height: 50px;
  text-align: center;
}

.product:nth-child(1) {
  background: #111;
  color: #AAA;
}

.product:nth-child(2) {
  background: #222;
  color: #999;
}

.product:nth-child(3) {
  background: #333;
  color: #888;
}

.product:nth-child(4) {
  background: #444;
  color: #777;
}

.product:nth-child(5) {
  background: #555;
  color: #666;
}

.product:nth-child(6) {
  background: #666;
  color: #555;
}

.product:nth-child(7) {
  background: #777;
  color: #444;
}

.product:nth-child(8) {
  background: #888;
  color: #333;
}

.product:nth-child(9) {
  background: #999;
  color: #222;
}

.product:nth-child(10) {
  background: #AAA;
  color: #111;
}

<div id="container">
  <div class="product">Produto 1</div>
  <div class="product">Produto 2</div>
  <div class="product">Produto 3</div>
  <div class="product">Produto 4</div>
  <div class="product">Produto 5</div>
  <div class="product">Produto 6</div>
  <div class="product">Produto 7</div>
  <div class="product">Produto 8</div>
  <div class="product">Produto 9</div>
  <div class="product">Produto 10</div>
</div>

EDIT

If you don’t know Media Queries, it would be the way, in CSS, you define to which screens you would like your rules to apply by putting your rules this way (Example):

@media screen and (max-width: 480px) {
    /* suas regras aqui */
}