Twitter bootstrap bootstrap中的设计

我是bootstrap的新手，任何人都可以帮助我使用bootstrap CSS进行像这样的响应性设计

我的HTML代码

<div class="row recommended-story">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 card-lst">
        <div class="pull-left img-block">
            <img class="" src="https://randomuser.me/api/portraits/men/82.jpg">
         </div> 
         <div class="card-descriptions pull-left">
             <h4><p class="card-ttl">Lorem ipsum dolor sit amet</p></h4>
                 <div class="usr-description">
                     <span class="pull-left">Bipin Fultariya</span>
                     <span class="pull-right">4 min read</span>
                 </div>
             </div> 
           </div>
        </div>

。推荐故事{
垫底：20px；
}
.推荐故事。img模块img{
高度：120px；
宽度：80px；
边界半径：4px；
}
.推荐故事.卡片lst{
左侧填充：0；
背景：#fff；
}
.推荐故事.卡片说明{
填充：5px14px；
}

你好，世界
Lorem ipsum Door sit amet，Concetetur Adipsicing Elite。塞德·亨德雷瑞特告别了布兰迪特。阿利夸姆·普莱斯特拉特，维利特·弗雷森姆，我的猫，我的车，我的车，我的车

您可以使用Bootstrap 3.3中提供的媒体对象。阅读更多关于它的信息

我已经用媒体对象复制了它

.p-5{
垫面：3rem；
}
.媒体{
边框：1px实心#444；
填充：3rem；
}

Lorem ipsum dolor sit amet
“同一知识”或“同一知识”或“同一知识”或“同一知识”或“同一知识”或“同一知识”或“同一知识”或“同一知识”或“同一知识”或“同一知识”或“同一知识”或“同一知识”或“同一知识”

杰森·汉克
4分钟阅读

你好，世界
Lorem ipsum dolor sit amet，Concetetur Adipsicing Elite。塞德·亨德雷瑞特告别了布兰迪特。阿利夸姆·普莱斯特拉特，维利特·弗雷森姆，我的猫，我的车，我的车，我的车

SO不是编码机器。请添加您迄今为止尝试的内容步骤1：阅读文档。第二步：自己编写代码。第三步：享受结果。使用引导卡来实现它！这很简单！使用卡：它是引导版本3，所以卡不能正常工作

.recommended-story {
    padding-bottom: 20px;
}

.recommended-story .img-block img {
    height: 120px;
    width: 80px;
    border-radius: 4px;
}

.recommended-story .card-lst {
    padding-left: 0;
    background: #fff;
}

.recommended-story .card-descriptions {
    padding: 5px 14px;
}

<div class="col-sm-6 col-md-6 col-xs-6">
                        <div class="thumbnail" style="border:none; background:white;">
                            <div class="width" style="
    display:  inline-block;
">
                                <img src="https://randomuser.me/api/portraits/men/82.jpg" style="
    display:  inline-block;
">
                            </div>
                            <div class="width-image" style="
    display:  inline;
    margin-top: 0;
    position:  absolute;
    padding-left: 16px;
    top: -10px;
">  
                                <h3 style="
    display:  inline-block;
    margin-bottom:  0;
">Hello World</h3>
                                <p style="font-size:10px;color:#03225C;width: 146px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.   </p>
                            </div>
                        </div>
                   </div>