html - 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>