What is the best way to make this responsive in bootstrap? - html

Question

So I have a layout that I want to make responsive in bootstrap according to the device. What I want to know is how I can execute it in a way that is shown in the image. I have tried using table cells and bootstrap column/rows but to no avail.
I want the elements above availability and Link 1 to fall to the left of the words. How can I do this?
Here is my HTML and CSS:
<div class="col-md-12" style="border:black solid 1px;">
<div class="row vertical-align">
<div class="col-sm-2">
<div class="row">
<div style="padding:5px;" class="col-xs-4">
<input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
</div>
<div class="col-xs-8">
<img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Name：</strong>Bob</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Agency：</strong>AFDM</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Stack：</strong>ADCM</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Grade：</strong>C</div>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<div class="led-red-trans"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Available</strong>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Link</strong>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-xs-12">
<a data-toggle="collapse" href="#collapseme"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>More</strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="collapseme" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.vertical-align {
display: flex;
align-items: center;
}
.led-red-trans {
margin: 0 auto;
width: 24px;
height: 24px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}
/* Large Devices, Wide Screens */
#media (min-width : 1200px) {
.vertical-align {
display: flex;
align-items: center;
}
}
/* Medium Devices, Desktops */
#media (min-width : 992px) and (max-width : 1199px) {
.vertical-align {
display: flex;
align-items: center;
}
}
/* Small Devices, Tablets */
#media (max-width : 768px) and (max-width : 991px) {
.vertical-align {
display: flex;
align-items: center;
}
}
/* Extra Small Devices, Phones */
#media (max-width : 767px) {
.vertical-align {
display: block;
align-items: center;
}
}
/* Custom, iPhone Retina */
#media (max-width : 480px) {
.vertical-align {
display: block;
align-items: center;
}
}
And a CODEPEN:
http://codepen.io/nilerafter24/pen/VPYpqq

Answer 1

this will help you some how with pure bootstrap classes.
<div class="col-md-12" style="border:black solid 1px;">
<div class="row vertical-align">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div style="padding:5px;" class="col-xs-4">
<input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
</div>
<div class="col-xs-8">
<img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-xs-12 col-lg-6">
<div><strong>Name：</strong>Bob</div>
</div>
<div class="col-xs-12 col-lg-6" >
<div><strong>Stack：</strong>ADCM</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-6">
<div><strong>Agency：</strong>AFDM</div>
</div>
<div class="col-xs-12 col-lg-6">
<div><strong>Grade：</strong>C</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<span class="glyphicon glyphicon-lamp" aria-hidden="true"></span>
</div>
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<strong>Available</strong>
</div>
<div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
<strong>Link</strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="collapseme" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>

Answer 2

This is the theory behind how I would do your code:
Surround each of the sections in a div and float:left them or display: inline-block them.
Use media tags to add float: none or display: block when the times comes.
Note Do not use table for responsive design, it's the worst to deal with.
Rough Example:
.first,
.second,
.third {
width: 33%;
padding: 1%;
display: inline-block;
}
img {
max-width: 100%;
}
.vertical-align {
display: flex;
align-items: center;
}
.led-red-trans {
margin: 0 auto;
width: 24px;
height: 24px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}
/* Large Devices, Wide Screens */
#media (min-width: 1200px) {
}
/* Medium Devices, Desktops */
#media (min-width: 992px) and (max-width: 1199px) {
}
/* Small Devices, Tablets */
#media (max-width: 768px) and (max-width: 991px) {
}
/* Extra Small Devices, Phones */
#media (max-width: 767px) {
}
/* Custom, iPhone Retina */
#media (max-width: 480px) {
.vertical-align {
display: block;
align-items: center;
}
.first,
.second,
.third {
width: 100%;
}
}
<div class="col-md-12" style="border:black solid 1px;">
<div class="row vertical-align">
<div class="col-sm-2 first">
<div class="row">
<div style="padding:5px;" class="col-xs-4">
<input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox">
</div>
<div class="col-xs-8">
<img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg">
</div>
</div>
</div>
<div class="second">
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Name：</strong>Bob</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Agency：</strong>AFDM</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">
<div><strong>Stack：</strong>ADCM</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div><strong>Grade：</strong>C</div>
</div>
</div>
</div>
</div>
<div class="third">
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<div class="led-red-trans"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Available</strong>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>Link</strong>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-xs-12">
<a data-toggle="collapse" href="#collapseme"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>More</strong>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="collapseme" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>

Answer 3

My suggestion would be to break it into 3 columns. And then split those columns into sub columns. Like so..
large screen
l4 l4 l4
| | l6 | l6 | l6 l6 |
| Image | |Name, Agency| |Stack, Group| | |Availability| |Link 1| |
medium screen
m4 m4 m4
| | m12 | m12
| | |Name, Agency| | |Availability|
| | m12 | m12
| | |Stack, Group| | |Link 1|
small screen everything will be sm-12
a simple implementation - codepen