モバイルではなくデスクトップ上にカラムを積み重ねる公式の方法は何ですか？

Question

私はBootstrap v。4を初めて使用しています。デスクトップ上に3行あり、左側の列にアイコンがあり、右側にテキストがある2列のフッタがあります。

モバイルでは、アイコンがテキストの上に表示されます。これを達成するためににrowクラスを追加することができますが、それもデスクトップに影響します。

私は解決策を探してみましたが、適切な/正式なものが存在しないか、適切な検索条件を使用していません。

誰でも手助けできますか？ありがとうございました！

<div class="col" id="kpc-phone-address-booking"> 

     <h2>Contact</h2> 

     <div class="row"> 

     <div class="col-sm-3"> 
      <i class="fa fa-phone" aria-hidden="true"></i> 
     </div> 

     <div class="col-sm-9"> 
      <p><a href="tel:<?php echo get_field('kpc_site_wide_fields_phone_1', 'option'); ?>"><?php echo the_field('kpc_site_wide_fields_phone_1', 'option'); ?></a></p> 
      <p><a href="tel:<?php echo get_field('kpc_site_wide_fields_phone_2', 'option'); ?>"><?php echo the_field('kpc_site_wide_fields_phone_2', 'option'); ?></a></p> 
     </div> 

     </div> 



     <div class="row"> 

     <div class="col-sm-3"> 
      <i class="fa fa-map-marker" aria-hidden="true"></i> 
     </div> 

     <div class="col-sm-9"> 
      <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><?php echo the_field('kpc_site_wide_fields_address', 'option'); ?></p> 
     </div> 

     </div> 



     <div class="row"> 

     <div class="col-sm-3"> 
      <i class="fa fa-calendar" aria-hidden="true"></i> 
     </div> 

     <div class="col-sm-9"> 
      <p><a href="<?php echo get_field('kpc_site_wide_fields_schedule_an_appointment_url', 'option'); ?>">Schedule an Appointment »</a></p> 
     </div> 

     </div> 

    </div> 

Answer 1

短い答え：デフォルトでは、列常にスタックとxsブレークポイント（モバイル幅< 576px）に全角になります。

---

2ブートストラップグリッドについて知るべき重要な事柄：

1. あなたは、単一の.rowの列の12個の以上のユニットを置くことができます。これはcolumn wrappingとして知られています。列が12を超えると、新しい行に「折り返す」。

だから、あなたがマークアップに...

<div class="row"> 
     <div class="col" id="kpc-phone-address-booking"> 
      <h2>Contact</h2> 
      <div class="row"> 
       <div class="col-sm-3"> 
        <i class="fa fa-phone" aria-hidden="true"></i> 
       </div> 
       <div class="col-sm-9"> 
        <p><a href="-">Option</a></p> 
        <p><a href="-">Option</a></p> 
       </div> 
       <div class="col-sm-3"> 
        <i class="fa fa-map-marker" aria-hidden="true"></i> 
       </div> 
       <div class="col-sm-9"> 
        <p itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">Option</p> 
       </div> 
       <div class="col-sm-3"> 
        <i class="fa fa-calendar" aria-hidden="true"></i> 
       </div> 
       <div class="col-sm-9"> 
        <p><a href="">Schedule an Appointment »</a></p> 
       </div> 
      </div> 
     </div> 
    </div> 

を変更した場合は、それが.rowの本家デスクトップ上と同じように削除されている作品がわかります。これは3 + 9 = 12となるため、3 + 9の各コンボは次の行に「ラップ」します。

http://www.codeply.com/go/1cjoPMdpmd

列は常にスタック、XSは（< 576px）をブレークポイントで全幅となっ

。指定されていない場合でも、col-12はです。です。特定のcol-*（xs）クラスをに使用して、スタッキングをにしないようにしてください。たとえば、

あなたの列がcol-3とcol-9に変更した場合、彼らはないスタックだろう縦幅576px <で。 demoの画面の幅を狭くすると、< 576pxの列が垂直方向に積み重なり、全幅になります。しかし、私は最後の2列を変更：

 <div class="col-sm-3 col-2"> 
      <i class="fa fa-calendar" aria-hidden="true"></i> 
     </div> 
     <div class="col-sm-9 col-10"> 
      <p><a href="">Schedule an Appointment »</a></p> 
     </div> 

どの意志prevent縦に積み重ねからこれらの最後の2列。画面の幅が縮小すると、幅が縮小されます< 576px。