Você pode usar o *Media Querie* do css:

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

    .container {
      width: 100%;
      height: 1000px;
    }

    .col {
      display: inline-block;
      background: #333;
      width: 30%;
      height: 300px;
      margin: 2px 0;
    }

    @media (max-width: 500px) {
      .col {
        display: block;
        width: 100%;
        height: 200px;
      }
    }


<!-- language: lang-html -->

    <div class="container">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>


<!-- end snippet -->

Com o `max-width` você define a largura máxima, quando a largurada página for menor que essa, o que tiver dentro do querie irá ser chamado.

##[JsFiddle](https://jsfiddle.net/9phswk1k/)