teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

回答に追記しました。

2017/08/30 13:51

投稿

kjml
kjml

スコア219

answer CHANGED
@@ -8,4 +8,24 @@
8
8
  classはスペースで区切って複数指定ができますので、上記であれば
9
9
  smallサイズ (`sm`)の場合は12/12(なので1行に1個)
10
10
  middleサイズ(`md`)の場合は4/12(なので1行に3個並ぶ)
11
- という事が出来ます。
11
+ という事が出来ます。
12
+
13
+ **追記:**
14
+ 違ったままでは申し訳ないので試してみました。
15
+ 順番の入れ替えが`push/pull`(ver3)から`order`に変わっていたり、`img-responsive`(ver3)から`img-fluid`に変わっていたり、alpha6で`order`が効いてなかったり、ver4でいろいろ難儀しましたが、一応、bootstrap/4.0.0-beta で確認できました。
16
+ ```
17
+ <div class="container-fluid">
18
+ <div class="row">
19
+ <div class="col-12 col-md-4">
20
+ <div class="row align-items-center">
21
+ <div class="col-2 order-1 col-md-12 order-md-2">
22
+ <img class="img-fluid linkimg" src="/up_img/****.jpg" style="margin:auto;">
23
+ </div>
24
+ <div class="col-9 order-2 col-lg-12 order-lg-3">テキストテキストテキストテキストテキストテキスト</div>
25
+ <h4 class="col-1 order-3 col-md-12 order-md-1">タイトル</h4>
26
+ </div>
27
+ </div>
28
+ :
29
+ :
30
+ ```
31
+ imgは適当なのに置き換えてましたし、構成順だとかもずいぶん変えてしまったので、わかりにくくなってしまったかもしれませんが、動きとしては参考になるのではないでしょうか。