From one-third columns to one-half colums - html

Question

I am trying to make a list of images and descriptions that are in sets of threes at larger widths, and go to sets of twos at smaller widths. But when I break down it gets very messed up, and I don't know what to do to make it break down into clean one-half columns. Thanks in advance for your help!
div.thirds {
padding-bottom: 20px;
padding: 50px;
text-align: center;
font-family: Gudea;
}
div.button1 {
width:90px;
height:40px;
margin-left: 38%;
}
div.one-third {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}
div.button2 {
width:90px;
height:40px;
margin-left: 38%;
}
div.one-third-last {
margin: 0;
text-align: center;
font-family: Gudea;
}
div.button3 {
width:90px;
height:40px;
margin-left: 38%;
}
#media (maxwidth:900px;)
div.one-third {
width: 47.5%;
}
div.one-third-second {
margin: 0;
}
div.one-third-last {
clear: both;
float: none;
width: auto;
padding: 20px 0 0 0;
}
div.one-third {
width: 47.5%;
}
div.one-third-second {
margin: 0;
}
div.one-third-last {
clear: both;
float: none;
width: auto;
padding: 20px 0 0 0;
}
<div class="thirds clearfix">
<!-- one-third -->
<div class="one-third mobile-collapse">
<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" />
<h2>The Trainer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button1">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div><!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-second mobile-collapse">
<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" />
<h2>Lessons</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button2">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div><!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-fourth mobile-collapse">
<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" />
<h2>Training</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button3">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div><!--/one-third-->
</div><!--/thirds-->
<!-- thirds -->
<div class="thirds clearfix">
<!-- one-third -->
<div class="one-third mobile-collapse">
<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" />
<h2>The Trainer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button1">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div><!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-second mobile-collapse">
<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" />
<h2>Lessons</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button2">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div><!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-last mobile-collapse">
<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" />
<h2>Training</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button3">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div><!--/one-third-->
</div>

Answer 1

I'm sure your problem is around mixing percentage and fixed values. Try and think in terms of having 100% to play with. If you for example have a width of 48% with a fixed margin of say 100px, what happens if 100px is bigger than the 2% you have left to play with. Problems. That's what.

Answer 2

Are you allowed to use CSS Flex? If it fits in your minimum level of required CSS browser support, it could really save you a lot of the headache you're currently dealing with trying to manage floats.
CSS
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.item {
width: 33%;
}
#media (max-width: 900px) {
.item {
width: 50%;
}
}
HTML
<div class="flex wrap">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
You can expand the example to include additional markup inside each .item class. I provide a larger example here - JSFiddle

Answer 3

bootstrap is the way to go - the following will display 2 rows of 3 divs on a medium to large viewport. 3 rows of 2 divs on a small viewport. Note that there is a col-lg class as well if you want to have another style for large screens and a col-sm class if you want a class between mobile size (xs) and small screen (sm), also I have not inserted the OP code into the divs - I just wanted to demonstrate the point:
click the full screen link in the following snippet to see the div's change position depending on the width of the viewport. I also added a border to each and centered the text - just for demonstration purposes.
.container div{
text-align:center;
border:solid 1px #ddd}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-4 col-xs-6">Content</div>
<div class="col-md-4 col-xs-6">Content</div>
<div class="col-md-4 col-xs-6">Content</div>
<div class="col-md-4 col-xs-6">Content</div>
<div class="col-md-4 col-xs-6">Content</div>
<div class="col-md-4 col-xs-6">Content</div>
</div>