Duas colunas lado a lado(responsivo)

Pessoal,

Uma página do meu site está dividida em duas seções. No desktop funciona normalmente. O problema é quando a página é visualizada no smartphone, pois fica toda desconfigurada.

Aliás, para quem está desenvolvendo localmente e quer testar no celular, indico esse site: http://www.responsinator.com/

Meu código está como abaixo. Se eu alterar a width para auto, funciona perfeitamente no smartphone, porém desanda no desktop.

Como posso resolver?

Observação: a figura está dentro de biografia.

#biografia{
 width: 22%;
 float: left;
 margin: 0 auto;
 border: 1px dotted #999;
 background-color: #DDD;
 display: inline-block;
}

aside#lateral{

 display: inline-block;
 width: 70%;
 float: right;
 margin: 0 auto;
 box-shadow: 2px 2px 2px rgba(0,0,0,.5);
 background-color: #DDD;
 padding: 2.3%;
}

figure figcaption#autor{

 width: 100%;
 margin-top: 18%;
 font-size: 1.3em;
 border-top: 1px solid #CCC;
 border-bottom: 1px solid #CCC;
 padding: 5%;
}

p.autor{

 font-size: 1.1em;
 text-align: center;
 padding: 2.4%;
 margin: 0 auto;
}