2
大きな幅で3つのセットになっているイメージと説明のリストを作成しようとしています。小さい幅で2つのセットに行きます。しかし、私が壊れたとき、それは非常に混乱し、私はそれをきれいな半分の列に分解するために何をすべきかわかりません。あなたの助けを前もってありがとう！3分の1列から2分の1列まで
div.thirds {
\t padding-bottom: 20px;
\t padding: 50px;
\t text-align: center;
\t font-family: Gudea;
}
div.button1 {
\t width:90px;
\t height:40px;
\t margin-left: 38%;
}
div.one-third {
\t width: 30%;
\t float: left;
\t margin-right: 5%;
\t text-align: center;
\t font-family: Gudea;
}
div.button2 {
\t width:90px;
\t height:40px;
\t margin-left: 38%;
}
div.one-third-last {
\t margin: 0;
\t text-align: center;
\t font-family: Gudea;
}
div.button3 {
\t width:90px;
\t height:40px;
\t margin-left: 38%;
}
@media (maxwidth:900px;)
div.one-third {
\t width: 47.5%;
}
div.one-third-second {
\t margin: 0;
}
div.one-third-last {
\t clear: both;
\t float: none;
\t width: auto;
\t padding: 20px 0 0 0;
}
div.one-third {
\t width: 47.5%;
}
div.one-third-second {
\t margin: 0;
}
div.one-third-last {
\t clear: both;
\t float: none;
\t width: auto;
\t padding: 20px 0 0 0;
}<div class="thirds clearfix">
\t
\t <!-- one-third -->
\t <div class="one-third mobile-collapse">
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" />
\t \t <h2>The Trainer</h2>
\t \t <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>
\t \t <div class="button1">
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
\t \t </div>
\t </div><!--/one-third-->
\t
\t <!-- one-third -->
\t <div class="one-third one-third-second mobile-collapse">
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" />
\t \t <h2>Lessons</h2>
\t \t <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>
\t \t <div class="button2">
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
\t \t </div>
\t </div><!--/one-third-->
\t
\t <!-- one-third -->
\t <div class="one-third one-third-fourth mobile-collapse">
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" />
\t \t <h2>Training</h2>
\t \t <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>
\t \t <div class="button3">
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
\t \t </div>
\t </div><!--/one-third-->
\t
</div><!--/thirds-->
<!-- thirds -->
<div class="thirds clearfix">
\t
\t <!-- one-third -->
\t <div class="one-third mobile-collapse">
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" />
\t \t <h2>The Trainer</h2>
\t \t <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>
\t \t <div class="button1">
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
\t \t </div>
\t </div><!--/one-third-->
\t
\t <!-- one-third -->
\t <div class="one-third one-third-second mobile-collapse">
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" />
\t \t <h2>Lessons</h2>
\t \t <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>
\t \t <div class="button2">
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
\t \t </div>
\t </div><!--/one-third-->
\t
\t <!-- one-third -->
\t <div class="one-third one-third-last mobile-collapse">
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" />
\t \t <h2>Training</h2>
\t \t <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>
\t \t <div class="button3">
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
\t \t </div>
\t </div><!--/one-third-->
\t
</div>
あなたは時間を節約することができますtwitterブートストラップCSSグリッドを使用してください。 http://getbootstrap.com/css/#grid – fauverism
グリッドだけが必要な場合はhttp://www.cutegrids.com/を使用することもできます。 – coopersita
また、 '@media（maxwidth：900px;）'に ' - 'がありません。 '@media（max-width：900px;）'にする必要があります。 – coopersita