Bootstrap rows & col responsive - css

Question

Using bootstrap's grid, is it possible to build something responsive like this?
This is what I attempted at so far.
<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>
But for mobile, I want the purple column to pop out and displayed under. The content is too crunched up right now, and breaking it into its own full width box would be much better. Is it possible though?

Answer 1

You didn't ask how cells should look for sm viewport (from 768px till 991px) It should look like for md or like for xs?
Here is a snippet for md and xs viewports
.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>