これまでにお答えいただきましたことをお詫び申し上げます。水平に整列された4つのdivが小さい画面サイズで2つに分割されます
私は4つの水平に整列されたdivを持っています。それぞれにはimgとtextが含まれています。
box box box box
私は、画面サイズを小さくすると、私はこれらが私を与えるために、真ん中を下に分割したい：
box box
box box
代わりに、私は現在取得しています何の：
box box box
box
現在、画面サイズをさらに縮小すると、2x2としてスタックし、非常に小さな画面（これはまだ実行する必要があります）で垂直レイアウトに分割します。ここ
JSフィドル：https://jsfiddle.net/zyrkstnk/
任意のアイデア？私は& nbspを使いこなしましたが、動作させることはできません。ありがとう！
#homethumbs {
\t width: 100%;
\t text-align: center;
}
.homethumb {
\t width: 300px;
}
.homethumb, .wrap {
\t display: inline-block;
}<div id="homethumbs">
<div class="wrap">
<div class="homethumb">
<img src="http://placehold.it/250x250">
<h2>Start here with the basics</h2>
</div>
<div class="homethumb">
<img src="http://placehold.it/250x250">
<h2>Start here with the basics</h2>
</div>
</div>
<div class="wrap">
<div class="homethumb">
<img src="http://placehold.it/250x250">
<h2>Start here with the basics</h2>
</div>
<div class="homethumb">
<img src="http://placehold.it/250x250">
<h2>Start here with the basics</h2>
</div>
</div>
</div>あなたはフレックス試してみてください！
#homethumbs {
width: 100%;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: wrap;
-webkit-flex-flow: wrap;
flex-flow: wrap;
}
.homethumb {
flex: 0 0 50%;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
}
@media (min-width: 1000px){
.homethumb {
flex: 0 0 25%;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
}
}
ビューポートメタタグを入れるのを忘れないでください。この結果のビデオは次のとおりです。http://www.screencast.com/t/lYV6tFvhn9
これをWordPressサイトの一部として簡単に使用できますか？私はウェブ開発には新しく、まだこのすべてのものの周りを頭で覆そうとしています。 – ts123
試してみてください！あなたのスタイルシートは、WordPressのインターフェースで見つけてください。それは外観/エディタになければならず、それはstyle.cssと呼ばれます。次に、それらの2つの要素を探し、上のスタイルでスタイルを上書きします。ビューポートタグは既に存在するはずです。このタグは、上記の@mediaを使用できるように画面サイズを検出するために使用されます。だから、あなたが1000pxよりも広いスクリーン上にいるなら、これをします。 – Vcasso
ありがとうございます。 flexは、（ブートストラップのように）追加のスタイルシートの読み込みを必要としませんか？ – ts123
フレックスを同じデバイスと小さいデバイスに使用すると、各divの幅を50％に設定してフレックスラップを設定できます。これでラップすると2 * 2グリッド
チェックこのスニペット
#homethumbs {
display: flex;
}
@media (min-width: 200px) and (max-width: 1000px) {
#homethumbs {
flex-wrap: wrap;
width: 100vw;
border: 1px solid;
}
.homethumb {
width: 50vw;
}
}<div id="homethumbs">
<div class="homethumb">
<img src="http://placehold.it/250x250">
<h2>Start here with the basics</h2>
</div>
<div class="homethumb">
<img src="http://placehold.it/250x250">
<h2>Start here with the basics</h2>
</div>
<div class="homethumb">
<img src="http://placehold.it/250x250">
<h2>Start here with the basics</h2>
</div>
<div class="homethumb">
<img src="http://placehold.it/250x250">
<h2>Start here with the basics</h2>
</div>
</div>希望これは、あなたがtwitter-使用することができます
を支援これのためのブートストラップ – Banzay
私は知っていますが、それはwordpressの単一のページのためであり、私はサイトの残りの部分にブートストラップを使いたくありません。 – ts123
divに2つのサムネイルをラップします。 https://jsfiddle.net/zyrkstnk/1/ – pol