UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code!
After experimenting with HTML/CSS for some time, I'm now working on my first layout using Twitter-Bootstrap. This is my initial inquiry, and any input is greatly appreciated.
I think the section of code I'm sharing can be streamlined further. While it looks mostly as I want it to, I sense there may be a simpler way to achieve my goal.
View this JS Fiddle.
The objective is to have two rows of diamonds on md+ screens, with 4 in the first row and 3 in the second. On small or x-small screens, the diamonds should transition to three rows, with 3 in the first row, 2 in the second, and 3 in the third, slightly spaced apart. Although the JS Fiddle appears as intended on md+ screens, I'm struggling to align rows 1 and 3 properly on small and x-small screens with the second row.
What would be the most efficient approach to achieving this? My current method feels convoluted. I'd prefer using only HTML/CSS to cater to users with JavaScript disabled. THANK YOU. :)
<section class="container-fluid diamonds">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="xsrow1">
<div class="col-md-3 col-xs-6 xsright no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
<div class="col-md-3 col-xs-6 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
</div>
<div class="xsrow2">
<div class="col-md-3 col-xs-4 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
<div class="col-md-3 col-xs-4 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
</div>
</div>
<div class="col-md-8 col-md-offset-2 mdrow2">
<div class="xsrow2">
<div class="col-md-4 col-xs-4 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
</div>
<div class="xsrow3">
<div class="col-md-4 col-xs-6 xsright no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
<div class="col-md-4 col-xs-6 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
</div>
</div>
</div>
</section>
.no-padding {
padding: 0!important;
padding-right: 3px!important;
padding-left: 3px!important;
margin: 0!important;
}
.diamonds {
position: relative;
}
.diamonds img {
width: 100%;
height: auto;
}
@media (max-width: 991px) {
.xsrow1 img, .xsrow3 img {
width: 66.66667%!important;
height: auto;
}
.xsright {
text-align: right;
}
}
@media (min-width: 992px) {
.mdrow2 {
position: absolute;
top: 51%;
left:0%;
padding-left: 3%;
padding-right: 3%;
}
}
UPDATE: I've come up with a solution that works for me, though I still find it somewhat messy. You can view the updated JS Fiddle here. If anyone has a cleaner method, please share it. :)