Html Bootstrap如何分两步创建响应网格？

我以前使用过yaml css框架，其中元素在两个或更多步骤中退化，现在我必须以某种方式将其转换为基于bootstrap 2.3x的wp主题。但是反应似乎只是一个步骤，所以我真的不知道如何让它为我工作。请帮帮我

更新我刚刚更新到3.x引导。我希望这将使解决方案成为可能

守则：

<div class="row-fluid" style="padding:1em;margin-top:3em;">
    <div class="span12">
        <div class="row-fluid">
            <div class="span8">
                <div class="row-fluid">
                    <div class="span4"> <a class='' href='#'>
                    <img class='media-object medium' src='http://dummyimage.com/160x250/ccc/222.png' id=''>
                </a>

                    </div>
                    <div class="span8">
                        <table class="table table-hover">
                            <tr>
                                <td><span class="pull-right">author</span>
                                </td>
                                <td><span class="pull-left text-bright"><a>Some Author</a></span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Title</span>
                                </td>
                                <td><span class="pull-left text-bright">The Earth within</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Serial</span>
                                </td>
                                <td><span class="pull-left text-bright">Keine / Einzelroman</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Publisher</span>
                                </td>
                                <td><span class="pull-left text-bright">Bookmonsters </span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Published in</span>
                                </td>
                                <td><span class="pull-left text-bright">2011-01-24</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Info</span>
                                </td>
                                <td><span class="pull-left text-bright">asdfasfd</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="span4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
        </div>
    </div>
</div>

作者
某作者
标题
里面的地球
电视连续剧
基恩/埃恩泽尔罗曼
出版商
书呆子
发表于
2011-01-24
信息
asdfasfd
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，如果你不愿意，那么你可以在实验室里实习。

---

您必须覆盖

引导的

默认样式，才能使示例正常工作。使用下面的

CSS

作为起点：

@media (max-width: 767px) {
    .override [class*=span] {
        float: left;
    }

    .override .span4 {
        width: 30%;        
    }

    .override .span8 {
        width: 70%;        
    }
}

---

如果升级到Bootstrap 3，则不需要定制CSS。您可以使用

md

和

xs

类

作者
某作者
标题
里面的地球
电视连续剧
基恩/埃恩泽尔罗曼
出版商
书呆子
发表于
2011-01-24
信息
asdfasfd
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
这是一个很好的例子。

你想达到的目标是什么？假设您使用的是bootstrap3

<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
  <img src="http://placehold.it/200x300" class="pull-right">  
</div>
  <div class="col-md-9 col-sm-9 col-xs-3">
    <div class="row">
      <div class="col-md-12">
         <table class="table table-hover">
                            <tbody><tr>
                                <td><span class="pull-right">author</span>
                                </td>
                                <td><span class="pull-left text-bright"><a>Some Author</a></span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Title</span>
                                </td>
                                <td><span class="pull-left text-bright">The Earth within</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Serial</span>
                                </td>
                                <td><span class="pull-left text-bright">Keine / Einzelroman</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Publisher</span>
                                </td>
                                <td><span class="pull-left text-bright">Bookmonsters </span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Published in</span>
                                </td>
                                <td><span class="pull-left text-bright">2011-01-24</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Info</span>
                                </td>
                                <td><span class="pull-left text-bright">asdfasfd</span>
                                </td>
                            </tr>
                        </tbody></table>
</div>
      <div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
    </div> 
  </div>
</div>

作者
某作者
标题
里面的地球
电视连续剧
基恩/埃恩泽尔罗曼
出版商
书呆子
发表于
2011-01-24
信息
asdfasfd
知识产权是一种权利，是一种权利，是一种权利，是一种权利
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
  <img src="http://placehold.it/200x300" class="pull-right">  
</div>
  <div class="col-md-9 col-sm-9 col-xs-3">
    <div class="row">
      <div class="col-md-12">
         <table class="table table-hover">
                            <tbody><tr>
                                <td><span class="pull-right">author</span>
                                </td>
                                <td><span class="pull-left text-bright"><a>Some Author</a></span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Title</span>
                                </td>
                                <td><span class="pull-left text-bright">The Earth within</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Serial</span>
                                </td>
                                <td><span class="pull-left text-bright">Keine / Einzelroman</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Publisher</span>
                                </td>
                                <td><span class="pull-left text-bright">Bookmonsters </span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Published in</span>
                                </td>
                                <td><span class="pull-left text-bright">2011-01-24</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Info</span>
                                </td>
                                <td><span class="pull-left text-bright">asdfasfd</span>
                                </td>
                            </tr>
                        </tbody></table>
</div>
      <div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
    </div> 
  </div>
</div>