在移動設備上疊加列而不是在桌面上的官方方法是什麼？

Question

我第一次使用Bootstrap v.4，並且我有一個頁腳，在桌面上有三行，在左欄中有一個圖標，右側是文本。

但是在移動設備上，我希望圖標出現在文本的頂部。我知道我可以添加一個div與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. 你可以把超過12個單位的列在一個單一的.row。這就是所謂的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> 

你會看到它的工作原理在桌面上以同樣的方式eventhough的.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> 

這將最後2列豎排堆疊。隨着屏幕寬度縮小< 576px，它們將在寬度上縮小。