Different behaviour fluid layout

Question

I am looking for a layout that I saw some time ago but I forgot to bookmark. It had 3 main columns but, when resizing, it changed to 2 and the 3rd one fell down to the next row. It was NOT the normal layout resizing with overflow.

When resizing, the 3 cols actually stayed the same width until reaching some limit, at 33% of width each one but incrementing the height. The only thing that apparently changed was the text size. Then, at some point in resizing, one of the 3 ones fell down to the next row, making the 2 on the top to resize to fill the whole width (50% and 50%) and the one on the bottom to fill up the 100% of the new row. I tried googling a lot, but since I'm not native I cannot seem to find the precise terms to find it. I know it worked perfectly in the demo and was only with CSS and HTML.

EDIT, the container of the 3 of them stayed with the same width the whole time.

Answer 1

Media queries sound like they may be what you're after. You can specify different styles depending on the width of the browser window. It could certainly be used to achieve what you're after.

eg. Say you wanted to target devices that greater than 900px wide, you could use:

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

You can find more information on media queries here