Responsive, 3 colums in deskview and 2 in mobile veiw

Question

How to scale the 3 colums into two when the user has a mobile. I can a alot about media queries but I dont know how to do this. Like this:

http://postimg.org/image/sox89ekqj/

Answer 1

I'm just going to give you 2 examples on how you can do this, because there is many ways to achieve what you want.

using display:table and display:table-cell

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
section {
  display: table;
  width: 100%
}
div {
  display: table-cell;
  border: 1px solid red;
  padding: 5px;
  width: 33%;
  height: 200px
}

@media(max-width:480px){
div {
  width: 50%
}
div:last-child {
  display: none
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

using display:inline-block

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
section {
  font-size:0
}
div {
  display: inline-block;
  border: 1px solid red;
  padding: 5px;
  width: 33.3%;
  height: 200px
}

@media(max-width:480px){
div {
  width: 50%
}
div:last-child {
  display: none
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

EDIT

a possible solution with margins due to OP's comment.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
section {
  border: 2px solid green;
  height: 204px;
}
div {
  float: left;
  background-color: red;
  margin-right: 2%;
  width: 32%;
  height: 200px
}
div:last-child {
  margin-right: 0
}
@media(max-width:480px){

div {
  width: 49%
}
div:nth-child(2) {
  margin-right: 0;
}
div:last-child {
  display: none;
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>