Bootstrap rows＆col responsive

Question

使用引导程序的网格，是否可以构建响应式的东西？

这是我试图在到目前为止什么。

<div class="row"> 
    <div class="panel panel-default profile_header"> 
     <div class="panel-body"> 
      <% for user in @users %> 
       <div class="col-xs-5 col-md-3"> 
        <%= image_tag(user.avatar.url(:medium), :class => "avatar_profile") %> 
       </div> 
       <div class="col-xs-7 col-md-9"> 
        <h2 class="profile_name"><%= user.name %></h2> 
        <div class="row"> 
         <div class="col-xs-12 col-md-12"> 
          <h2 class="profile_bio"><%= user.bio%></h2> 
         </div> 
        </div> 
       </div> 
      <% end %> 
     </div> 
    </div> 
</div> 

但是对于移动设备，我希望紫色列弹出并显示在下方。内容现在过于臃肿，将其打入自己的全宽盒子会好很多。有可能吗？

Answer 1

你没有问过细胞应该如何寻找sm视口（从768px到991px）它应该看起来像md或者像xs？

这里是md和xs视

.purple { 
 
    background: purple; 
 
} 
 
.orange { 
 
    background: orange; 
 
} 
 
.green{ 
 
    background: green; 
 
} 
 
div[class^="col-"]{ 
 
    height: 100px; 
 
} 
 

 
@media screen and (min-width: 992px) { 
 
    div.orange { 
 
     height: 200px !important; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-3 col-xs-5 orange"> 
 
     </div> 
 
     <div class="col-md-9 col-xs-7 green"> 
 
     </div> 
 
     <div class="col-md-9 col-xs-12 purple"> 
 
     </div> 
 
    </div> 
 
</div>