bootstrap3 画像の並びについて

Question

###前提・実現したいこと
いつもお世話になっております。

bootstrapのグリッドシステムを使ってます。

３つの画像を、添付資料の通り並べたい。
ただ、スマートフォンの場合は、添付資料右側の
ように縦に並べたいと考えております。

が、回り込みの時点で、どうすればいいかわからなくなり・・・

添付資料左側のように、回り込みをするには、
どのようにするのでしょうか？

よろしくお願いします。

###やりたいこと

###該当のソースコード
無理やり書きましたが、image1がセンタリングで・・・ずれて・・・

<div id="area1">
	<div class="col-xs-2">
	</div>
	<div class="col-xs-4">
		<img src="img/image1.png" alt="" class="img-responsive center-block">
	</div>
	<div class="col-xs-4">
		<img src="img/image2.png" alt="" class="img-responsive center-block">
		<img src="img/image3.png" style="margin-top: 10px" alt="" class="img-responsive center-block">
	</div>
	<div class="col-xs-2">	
	</div>
</div>

なんとなく、これをCSSで回り込みさせるのかな？とイメージしています。

<div id="area1">
	<div class="col-xs-12">
		<img src="img/image1.png" alt="" class="img-responsive center-block">
		<img src="img/image2.png" alt="" class="img-responsive center-block">
		<img src="img/image3.png" style="margin-top: 10px" alt="" class="img-responsive center-block">
	</div>
</div>

Answer 1

こんな感じでしょうか。

<div id="area1">
    <div class="col-xs-12">
        <img src="img/image1.png" alt="" class="img-responsive center-block">
    </div>
    <div class="col-xs-12 col-sm-6">
        <img src="img/image2.png" style="margin-top: 10px" alt="" class="img-responsive center-block">
    </div>
    <div class="col-xs-12 col-sm-6">
        <img src="img/image3.png" style="margin-top: 10px" alt="" class="img-responsive center-block">
    </div>
</div>

スマホのブレークポイント大きすぎるんだよなあ。

Comments

[tsuru0508]

ありがとうございます。

なるほど、この手もありますね。

参考に、一度作成してみます！！

皆さまありがとうございました。

Answer 2

image1 を 12
image2, image3 を 6/12
としてやれば良いです。

Comments

[tsuru0508]

ありがとうございます。

やっぱりそうしかないですよね。。。

[退会済みユーザー]

別に他に方法がないわけではないけれど、記述された要件を満たすにはこれが最適と思って回答しています。
何が不満なのでしょうか？
隠れた要件があるのであれば、開示することで回答は付くと思いますが。。。

[tsuru0508]

ごめんなさい

誤解を招く返答ですいません。
ご気分を害されて申し訳ないです。

回答に不満があったわけではありません。

[退会済みユーザー]

気分を害したというよりタダの好奇心です。
私と ooeok さんは同じ回答をしていますが、片方には「そうしかない」とコメントし、他方には「この手もありますね」とコメントしているので、どのような隠れ要件があれば、このような反応になるのか知りたかっただけです。