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>