スマホでの表示順番について

[yunahana]

いつもお世話になっております。

現在下記の様に、段組み(カラム)で文章が左、画像を右に並べています。
スマホでは文章が先にきてその後に画像が表示されます。
スマホでは画像を先に表示させたいと思うのですが、何か方法がありましたらご教授お願いいたします。

<div class="row">
<div class="col-sm-8">
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>
<div class="col-sm-4">
画像A
</div>
</div>

[DRILL LANCER]

BS4 版スキンをお使いの場合は下記で順序を入れ替えられます。

<div class="row">
	<div class="col-sm-4 order-sm-2">画像A</div>
	<div class="col-sm-8 order-sm-1">テキストテキストテキストテキスト</div>	
</div>

BS3 版スキンをお使いの場合は下記で順序を入れ替えられます。

<div class="row">
	<div class="col-sm-4 col-sm-push-8">画像A</div>
	<div class="col-sm-8 col-sm-pull-4">テキストテキストテキストテキスト</div>	
</div>

P.S.
BS3 版と BS4 版ではブレイクポイントが1段階ずれるのでよく確認してから使用してください。

[yunahana]

RICK 様

いつもありがとうございます！
お返事が遅くなり申し訳ありません。

BS4 版スキンとBS3 版スキンの調べ方がわからなかったので、どちらも試してみたところ、BS3 版スキンのソースが動作しました！
いつも的確なご教授、本当にありがとうございました！

BS3やBS4の事が分かっていないのですが‥
もしそのうちBS4 版が適用された場合は、今回の表示順番は無効になるのでしょうか？

何度も申し訳ありませんが、よろしくお願いいたします！

[DRILL LANCER]

Bootstrap 3 の sm の適用範囲は 768px 以上です。
一方、Bootstrap 4 のsm の適用範囲は 576px 以上、md の適用範囲は 768px 以上となっています。

よって、現状のまま BS4 版に移行すると幅が広めのスマホでは横並びになる可能性があります。

また、BS3 版では col-*-push-*やcol-*-pull-*で並び替えができましたが、
BS4 版では order-*-* でないと並び替えができなくなります。

よって、BS4版スキンを適用する際は下記のように変更する必要があります。

• col-sm-4→col-md-4
• col-sm-8→col-md-8
• col-sm-push-8→order-md-2
• col-sm-pull-4→order-md-1

BS3版では下記でOKだったのは

<div class="row">
	<div class="col-sm-4 col-sm-push-8">画像A</div>
	<div class="col-sm-8 col-sm-pull-4">テキストテキストテキストテキスト</div>	
</div>

BS4版では下記のようになります。

<div class="row">
	<div class="col-md-4 order-md-2">画像A</div>
	<div class="col-md-8 order-md-1">テキストテキストテキストテキスト</div>	
</div>

[yunahana]

RICK 様

早速のお返事、いつも詳細に記載いただきありがとうございます！

フォーラムを検索していて、Bootstrap4用スキンに意図的に切り替える処理をしなければ、従来通りのスキンでBootstrap3をベースに出力されるという方式を採用しています。というコメントがありましたので、自動的にBS4 版が適用されるという事はなさそうなので、Bootstrap4用スキンに変更したときにはBS4版ソースに変更したいと思います。

モヤモヤしていた作業がスッキリ出来ました！
本当にありがとうございました！

[投稿者]

投稿