Puedes ir haciendo todo más chico para resoluciones máximas. Empezando por `768px` que es la medida de las tablets y después puedes ir por `480px` que son los celulares.

En el siguiente [link][1] te dejo lo que has hecho pero con cambios para que tome los responsive, lo que hice fue achicar las medidas que tenías inicialmente y ponerle un `min-width` al contenedor para que no se rompa en caso de tener pocos caracteres, más que nada para `:(` que se veía mal.

    @media only screen and (max-width: 768px) {
      .bubble {
        padding: 5px 7px;
        min-width: 30px;
      }
      .bubble:after,
      .bubble:before {
        border-bottom-width: 12.5px;
        border-right-width: 12.5px;
        bottom: -12.5px;
        right: 12.5px;
      }
      .bubble:before {
        border-right-width: 12.5px;
        bottom: -14px;
        right: 11px;
      }
    }

Para el posicionamiento de los `<div>` con respecto al responsive podés usar el [`window.addEventListener("resize", miFuncionResize)`][2] y capturado el evento, calcular la nueva posición y cambiar las posiciones de los `<div>`.

  [1]: https://codepen.io/anon/pen/RyqaYV/
  [2]: https://developer.mozilla.org/en-US/docs/Web/Events/resize