Hey there, fellow brainiacs!
I'm in need of some assistance with aligning my bootstrap grid. The issue I'm facing is that it doesn't stack properly when in responsive mode. I would really appreciate some guidance on how to make it fold and stack correctly for a neat display on mobile devices.
If someone could help me with the structure without any styling, I would be extremely grateful, and I'll take care of the styling myself.
I have provided two example images: one showing the full view and the other displaying how it should stack or fold.
https://i.sstatic.net/hKRSt.png https://i.sstatic.net/CerB2.png
This is my code
div.parent {
border : solid black 1px;
display : table;
padding : 5px;
width : 100%;
/* you can change/remove margin */
margin :5px 0;
}
div.text {
vertical-align : middle;
display : table-cell;
text-align : justify;
}
div.parent .img {
vertical-align : middle;
display : table-cell;
padding-right : 5px;
width : 100px; /* you can change width */
}
div.img img {
width : 100%;
/* you can change height */
vertical-align : middle;
}
.my_planHeader {
text-align: center;
color: white;
padding-top:0.2em;
padding-bottom:0.2em;
}
.my_planTitle {
font-size:1em;
color: #000;
}
.my_subTitle {
font-size:0.80em;
color: #A64470 ;
color: #000;
}
.my_planPrice {
font-size:0.80em;
font-weight: bold;
color: #C0BBBB;
}
.my_disc {
font-size:1.4em;
font-weight: bold;
color: #C0BBBB;
}
.my_planDuration {
margin-top: -0.6em;
}
@media (max-width: 768px) {
.my_planTitle {
font-size:small;
}
}
/* --- TRANSFERS --------------------------- */
.my_plan1 {
background: rgb(224,234,242);
}
.my_planHeader.my_plan1 a {
background: rgb(72, 109, 139);
color:white;
}
.my_planHeader.my_plan1 {
background: #FEF6ED;
border-bottom: thick solid #FEEAD2;
}
/* --- FEE --------------------------- */
.my_plan2 {
background: rgb(230,235,218);
}
.my_planHeader.my_plan2 a {
background: rgb(108, 131, 62);
color:white;
}
.my_planHeader.my_plan2 {
background: #FCDFD1;
border-bottom: thick solid #FEF1EC;
}
/* --- APR --------------------------- */
.my_plan3 {
background: rgb(254,235,212);
}
.my_planHeader.my_plan3 a {
background: rgb(199, 127, 40);
color:white;
}
.my_planHeader.my_plan3 {
background: #F7D5DF;
border-bottom: thick solid #FBEDF1;
}
/* --- OVER --------------------------- */
.my_plan4 {
background: rgb(254,235,212);
}
.my_planHeader.my_plan4 a {
background: rgb(199, 127, 40);
color:white;
}
.my_planHeader.my_plan4 {
background: #EAD3DD;
border-bottom: thick solid #F7D5DF;
}
/* --- OVER --------------------------- */
.my_plan5 {
background: rgb(254,235,212);
}
.my_planHeader.my_plan5 a {
background: rgb(199, 127, 40);
color:white;
}
.my_planHeader.my_plan5 {
background: #F8F8F8;
border-bottom: thick solid #C0BBBB;
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<div class="container">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="row">
<div class="parent">
<div class="img">
<div class="col-lg-12 ">
<img src="http://www.placehold.it/90x90" class="img-responsive" alt="Some picture" width="150" height="150">
</div></div>
<div class="text">
<div class="col-lg-3 my_planHeader my_plan1">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
<div class="col-lg-3 my_planHeader my_plan2">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
<div class="col-lg-3 my_planHeader my_plan3">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
<div class="col-lg-3 my_planHeader my_plan1">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
<div class="col-lg-12 ">
<p>Free aqua credit checker. Start with a credit limit of £250-£1,200 and you could get an increase on your 4th statement.
Once the 0% deal ends the balance transfer rate will be 34.95% p.a. variable with a 3% fee.</p>
</div>
<div class="col-lg-12 my_planHeader my_plan3">
<div class="my_subTitle">Balance Transfers</div>
<div class="my_planTitle">0% for 24 months</div>
</div>
</div>
</div>
</div>
</div>
</div>