使用Flexbox的

自舉4中心元件通過引導4阿爾法6.我有以下標記：使用Flexbox的

<header class="jumbotron jumbotron-fluid"> 
    <div class="container"> 
    <div class="row justify-content-center flex-column-reverse flex-sm-row"> 
     <div class="col-12 col-sm-6"> 
     <h1 class="display-4"> 
      <a class="border-0" href="/@v">Vic</a> 
     </h1> 
      <p class="lead mb-100">We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p> 
      <p> 
       <svg>...</svg>Boston, MA, US<br> 
      </p> 
     </div> 
     <div class="col-12 col-sm-2"> 
     <a class="border-0" href="/@v"> 
      <img class="d-flex rounded-circle avatar--m" alt="Ng Khuen Ping" src="/system/profiles/avatars/000/000/001/avatar_m/firefox-copy-link.jpg?1489589655"> 
</a>  </div> 
    </div> 
    </div> 
</header>

產生以下結果的移動和桌面分別爲：

移動