Bootstrap4でのレイアウトに関してアドバス願います。

お世話になります。

ウェブサイトの制作にあたり、レスポンシブ対応を考えて、はじめてBootstrap4を使って色々と試しているところです。

上記のようなレイアウトをイメージし、以下のようなソースを設定いたしました。

<div class="row">	
	<div class="col-md-4">1</div>
	<div class="col-md-4">2</div>
	<div class="col-md-4">3</div>
	<div class="col-md-4">4</div>
	<div class="col-md-4">5</div>
	<div class="col-md-4">6</div>
</div>

と、ここで各ボックス内に画像とテキストを以下のように設置します。

上記図は、PCでのアクセス時ですが、スマホでアクセスしたとき画像とテキストの配置を以下のようにしたい考えております。

以上ですが、これを実現するためにアドバイスを頂戴出来ればと質問させて頂きました。
お忙しいところ恐縮ですが、よろしくお願いいたします。

追記：
現在の各設定を記載します。

HTML側では

<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/carousel.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">

とCSSを読み込み、
実際のソースは

<div class="row">
<div class="col-md-4"><div><img class="linkimg" src="/up_img/****.jpg" style="margin:auto;"></div><h4>タイトル</h4>テキストテキストテキストテキストテキストテキスト</div>
<div class="col-md-4"><div><img class="linkimg" src="/up_img/****.jpg" style="margin:auto;"></div><h4>タイトル</h4>テキストテキストテキストテキストテキストテキスト</div>
<div class="col-md-4"><div><img class="linkimg" src="/up_img/****.jpg" style="margin:auto;"></div><h4>タイトル</h4>テキストテキストテキストテキストテキストテキスト</div>
<div class="col-md-4"><div><img class="linkimg" src="/up_img/****.jpg" style="margin:auto;"></div><h4>タイトル</h4>テキストテキストテキストテキストテキストテキスト</div>
<div class="col-md-4"><div><img class="linkimg" src="/up_img/****.jpg" style="margin:auto;"></div><h4>タイトル</h4>テキストテキストテキストテキストテキストテキスト</div>
<div class="col-md-4"><div><img class="linkimg" src="/up_img/****.jpg" style="margin:auto;"></div><h4>タイトル</h4>テキストテキストテキストテキストテキストテキスト</div>
</div>

となっております。

3つのcssを読み込んでおりますが、style.css以外はBootstrapの公式サイトからダウンロードし、今回ご質問している部分いおいてはデフォルトのままとなっており、style.cssの上記ソース部分の該当箇所は

a img .linkimg{
	background:none!important;
}

a:hover img.linkimg{
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
	background:none!important;
}

s8_chu

2017/08/29 12:02 編集

質問者さんが記述したCSSはありますか？もしあるならば追記していただけませんか？

chapp

2017/08/29 12:31

早々のご連絡をありがとうございます。ただ今、現状を追記しました。よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

いまひとつどこで詰まっているかはっきりしませんが、
例えば

<div class="col-md-4">

この部分を、
<div class="col-sm-12 col-md-4">
このように複数指定すれば良いのではないでしょうか。
classはスペースで区切って複数指定ができますので、上記であれば
smallサイズ (sm)の場合は12/12（なので1行に1個）
middleサイズ(md)の場合は4/12（なので1行に3個並ぶ）
という事が出来ます。

追記：
違ったままでは申し訳ないので試してみました。
順番の入れ替えがpush/pull(ver3)からorderに変わっていたり、img-responsive(ver3)からimg-fluidに変わっていたり、alpha6でorderが効いてなかったり、ver4でいろいろ難儀しましたが、一応、bootstrap/4.0.0-beta で確認できました。

<div class="container-fluid">
	<div class="row">
		<div class="col-12 col-md-4">
			<div class="row align-items-center">
				<div class="col-2 order-1 col-md-12 order-md-2">
					<img  class="img-fluid linkimg" src="/up_img/****.jpg" style="margin:auto;">
				</div>
				<div class="col-9 order-2 col-lg-12 order-lg-3">テキストテキストテキストテキストテキストテキスト</div>
				<h4  class="col-1 order-3 col-md-12 order-md-1">タイトル</h4>
			</div>
		</div>
		:
		:

imgは適当なのに置き換えてましたし、構成順だとかもずいぶん変えてしまったので、わかりにくくなってしまったかもしれませんが、動きとしては参考になるのではないでしょうか。

投稿2017/08/29 22:56

編集2017/08/30 13:51

kjml

総合スコア219

chapp

2017/08/29 23:51

kjmlさまおはようございます。ご親切な回答ありがとうございます。 > この部分を、 > <div class="col-sm-12 col-md-4"> > このように複数指定すれば良いのではないでしょうか。私もそんな風に考えていたのですが、尾恥ずかしながら、どのような指定すれば良いのか分からず質問させていただきました。分かりにくい質問で恐縮ですが、質問時に記載したソースは、１番目の画像で示した通りとなり、PCでのアクセス時、スマホやタブレットでのアクセス時、それぞれ描いているレイアウトは叶っているのですが、このレイアウトは、あくまでエリアというかボックスというか、大枠の配置であり、今回わからないのは、その枠の中にある、画像とテキストの配置です。枠の中を考えたとき、PCでのアクセスの際は、<div class="****"></div>の中にある画像とテキストは上下（２行）となり、スマホなどでアクセスしたときは、<div class="****"></div>の中にある画像とテキストを１行内に並べて表示させたいと考えています。もしかしたら、kjmlさまの回答で解決できるのかも知れませんが、そもそもCSSの知識も浅い中でBoot strapを触り始めたこともあるので、失礼があった際はお許しください。引き続き、アドバイスのほど頂戴できれば幸いです。

kjml

2017/08/30 03:39

すみません、中身の話だったんですね。最初の画像にあった番号が実際のソースにはなくなってタイトルが現れていたりして、微妙な違いが本当にこのソースで画像の通りとなっているとは思えない部分がありますが、参考になりそうな部分を。 <div class="row">は入れ子にできます。順番の入れ替えはv3まではpush,pullで出来たのですが、廃止になり、v4では order- を使うようです（が、私はこれは試したことがありません） http://cccabinet.jpn.org/bootstrap4/layout/grid

chapp

2017/08/30 16:32

kjmlさまご親切なお返事をありがとうございます。ただいま回答を拝見いたしました。明日改めて確認させてください。取り急ぎ御礼まで・・・改めてお返事いたします。

行動規範の内容に同意します