VWSとは フォーラム Lightning [ 解決済 ] スマホでの表示順番について

[ 解決済 ] スマホでの表示順番について

  • このトピックには4件の返信、2人の参加者があり、最後にyunahanaにより3週前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #25309

    yunahana
    参加者

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

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

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

    RICK
    参加者

    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段階ずれるのでよく確認してから使用してください。

    #25350

    yunahana
    参加者

    RICK 様

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

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

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

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

    #25353

    RICK
    参加者

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

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

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

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

    • col-sm-4col-md-4
    • col-sm-8col-md-8
    • col-sm-push-8order-md-2
    • col-sm-pull-4order-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>
    #25358

    yunahana
    参加者

    RICK 様

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

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

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

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。