如何在HTML中创建响应式文章列表？

Question

我正在尝试为网站创建一个特定的响应列表但是我的失败很糟糕。 我尽力为你节省尽可能多的时间，通过创建显示我的代码的JSFiddle页面模板。

http://jsfiddle.net/awx4Lwod/8/

<span class="jd-news-articles">
<div class="news-article-1">
  <img src="http://placehold.it/191x116">
  <div class="news-article-content-text">
    <h2>NEWS HEADER GOES HERE</h2>
    <h3>October 10, 2014</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod accumsan auctor. Curabitur in nisi imperdiet, sodales dui at, mattis nulla.</p>
    <a href="#">...MORE</a> 
  </div>
</div>
    <div class="news-article-2">
  <img src="http://placehold.it/191x116">
  <div class="news-article-content-text">
    <h2>NEWS HEADER GOES HERE</h2>
    <h3>October 10, 2014</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod accumsan auctor. Curabitur in nisi imperdiet, sodales dui at, mattis nulla.</p>
    <a href="#">...MORE</a> 
  </div>
</div>
        <div class="news-article-1">
  <img src="http://placehold.it/191x116">
  <div class="news-article-content-text">
    <h2>NEWS HEADER GOES HERE</h2>
    <h3>October 10, 2014</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod accumsan auctor. Curabitur in nisi imperdiet, sodales dui at, mattis nulla.</p>
    <a href="#">...MORE</a> 
  </div>
</div>
</div>

现在考虑一下我应该使用<ul><li>结构。 如何制作图像使图像保持在左侧，但是当您缩小屏幕时，左侧的图像向下缩小，右侧的文本保留在图像高度的边界内？例如，无论图像的比例如何，标题都应与图像的顶部对齐，底部的链接应与图像的底部对齐，其余内容位于中间。

Answer 1

Bootstrap的文档很容易理解：http://getbootstrap.com/getting-started/

它为您提供从空白页到完整响应式设计的分步过程