col-push和col-pull bootstrap - 它是如何工作的？

Question

我一直在試圖圍繞這些工作如何運作，但迄今爲止我沒有運氣。在網站上我有，瀏覽器的版本是這樣的：

<div class="col-sm-4"> 
    <div class="aside"> 
      <div class="promo"> 
       <p>left content</p>  
      </div> 
    </div> 
    </div> 
    <div class="col-sm-8"> 
     <div class="content"> 
      <p>right content</p> 
     </div> 
    </div> 

對於這個偉大工程的瀏覽器，但在移動，我想它被奠定了這樣的：

 <div class="col-sm-8"> 
      <div class="content"> 
       <p>right content</p> 
      </div> 
     </div> 
     <div class="col-sm-4"> 
     <div class="aside"> 
       <div class="promo"> 
        <p>left content</p>  
       </div> 
     </div> 
     </div> 

我怎樣才能把它擺出來，並推動它正確地重新排列？

Answer 1

使用Bootstrap進行開發的最佳方式是思考「移動優先」。因此，從您的移動版面開始，爲其他尺寸添加推/拉類。請注意，我還在col-xs-12中添加了您的專欄，這在技術上不是必需的，但很明確地說明這些。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-xs-12 col-sm-8 col-sm-push-4"> 
 
    <div class="content"> 
 
     <p>right content</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-4 col-sm-pull-8"> 
 
    <div class="aside"> 
 
     <div class="promo"> 
 
     <p>left content</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>