[Решено] CSS3 картинка и текст две адаптированные колонки

Здравствуйте. Дайте совет как сделать в CSS3 картинка и текст две адаптированные колонки. Слева картинка справа текст.

 

http://jsbin.com/enurIKaK/1/edit?html,css,output

 

Привет. Спасибо за труды. Проверил к сожалению картинка не уменьшается. я тут кое что написал. Картинка уменьшается. Как с текстом быть только не знаю. Если время и желание есть подскажите. Текст в столбце справа должен быть, а он внизу.

Код:

<style type="text/css">
* { margin: 0px; padding: 0px; }
img { width: 100%; height: auto; }
.two-columns { width: 48%; display: inline-block; }

@media (min-width: 420px) {
  .breakpoint { max-width: 48%; }
}
@media (min-width: 760px) {
  .breakpoint { max-width: 24%; }
}

.container { position: relative; width: 96%; max-width: 960px; margin: 0px auto; text-align: center; }
.container1 { position: relative; width: 96%; max-width: 960px; margin: 0px auto; text-align: center; }

@media (max-width: 400px) {
  body { font-size: 16px; }
 
}

</style>
      <section id="responsive-images-columns">
      <div class="container">
      <img class="two-columns" src="images/image01.jpg" width="960" height="640" />
      </div>
      <div class="container1" class="two-columns">       
<h4>
Содержание номера</h4>
<h4>
Статьи</h4>
<ul style="text-indent:1.5em; text-align:justify; font-weight:500;">
<li>К сожалению, веб–дизайн еще не достиг</li>
<li>К сожалению, веб–дизайн еще не достиг</li>
<li>К сожалению, веб–дизайн еще не достиг</li>
<li>К сожалению, веб–дизайн еще не достиг</li>
<li>К сожалению, веб–дизайн еще не достиг</li>
<li>К сожалению, веб–дизайн еще не достиг</li>
<li>К сожалению, веб–дизайн еще не достиг</li>
<li>К сожалению, веб–дизайн еще не достиг</li>
</ul>
<h4>
Рисунки</h4>
<ul style="text-indent:1.5em; text-align:justify; font-weight:500;">
<li>рамки программный или разметочный код.</li>
<li>рамки программный или разметочный код.</li>
<li>рамки программный или разметочный код.</li>
<li>рамки программный или разметочный код.</li>
<li>рамки программный или разметочный код.</li>
</ul>   
    </div>
  </section>

ПРИМЕРНО ТАКАЯ КАРТИНКА

 

Ну все разобрался. спасибо за помощь