Xs屏幕中的Bootstrap網格系統2項

Question

我有以下網格系統，它們是3行，大屏幕中每行有3個項目，我想編輯代碼，使它們成為xs屏幕中每列中的2個項目，但它們卻被遺漏了，如何我能做到嗎？

 <div class="row text-center"> <div class="col-lg-4 col-xs-4"> <img src="service1.jpg" style="height:100px"> <h5>Desktop & Mobile Website Design</h5> <p>We offer a full website planning, workshop and design service for all industry sectors. We are also experts at creating websites for mobile phones and tablet devices.</p> </div> <div class="col-lg-4 col-xs-4"> <img src="web-cms.jpg" style="height:100px"> <h5>Website & Content Management</h5> <p>All websites need intelligence, and we have many years experience blending design and content management systems to help bring your website to life.</p> </div> <div class="col-lg-4 col-xs-4"> <img src="graphic-design.jpg" style="height:100px"> <h5>Creative Branding & Graphic Design</h5> <p>Effective branding and engaging graphic design is the first thing your clients notice. Make sure you stand out from the crowd with some high impact visuals.</p> </div> </div> <div class="row text-center"> <div class="col-lg-4 col-xs-4"> <img src="programming.jpg" style="height:100px"> <h5>Web Applications & Programming</h5> <p>We are experience at integrating technical applications and web systems. Make sure your business is supported correctly and your operations work together seamlessly.</p> </div> <div class="col-lg-4 col-xs-4"> <img src="ecommerce.jpg" style="height:100px"> <h5>e-Commerce & Payment Solutions</h5> <p>We can help you trade online with full e-commerce solutions comprising hundreds of products or maybe a simple payment gateway to accept customers transactions.</p> </div> <div class="col-lg-4 col-xs-4"> <img src="domains.jpg" style="height:100px"> <h5>Domain Names & Website Hosting</h5> <p>Professional websites require a solid platform. We manage hundreds of domain names and also run Dedicated and Cloud based hosting solutions for our clients.</p> </div> </div> <div class="row text-center"> <div class="col-lg-4 col-xs-4"> <img src="enewsletters.jpg" style="height:100px"> <h5>e-Newsletters & Broadcasting</h5> <p>We have years of experience helping customers market their business to interested people. We can help you design, build and broadcast your email campaigns.</p> </div> <div class="col-lg-4 col-xs-4"> <img src="marketing.jpg" style="height:100px"> <h5>Social Media & Marketing</h5> <p>Social media is part of everyday life and having an overall strategy is crucial for the success of your online business. We can help you get the most from your activity.</p> </div> <div class="col-lg-4 col-xs-4"> <img src="content.jpg" style="height:100px"> <h5>Content Creation & Production</h5> <p>We can work with you to help you with your copywriting, photography and video production in case you can't create these assets yourself.</p> </div> </div> </div> 

Answer 1

如果要在lg上包含3個項目，在xs上包含2個項目，則必須使用列換行和響應式重置 。 所有的col-應該是在一個單一的.row ...

<div class="row">
     <div class="col-lg-4 col-xs-6"> 1 </div> 
     <div class="col-lg-4 col-xs-6"> 2 </div> 
      <!-- clearfix xs cols every 2 -->
      <div class="clearfix visible-xs"></div> 
     <div class="col-lg-4 col-xs-6"> 3 </div> 
      <!-- clearfix lg cols every 3 -->
      <div class="clearfix visible-lg"></div> 
     <div class="col-lg-4 col-xs-6"> 4 </div> 
       <div class="clearfix visible-xs"></div> 
     <div class="col-lg-4 col-xs-6"> 5 </div> 
     <div class="col-lg-4 col-xs-6"> 6 </div>
       <div class="clearfix visible-xs visible-lg"></div>  
     <div class="col-lg-4 col-xs-6"> 7 </div> 
     <div class="col-lg-4 col-xs-6"> 8 </div>
       <div class="clearfix visible-xs"></div>  
     <div class="col-lg-4 col-xs-6"> 9 </div> 
     ...
</div>