引導列順序

Question

我正在使用Bootstrap在頁面上工作。佈局是這樣的桌面上：

image - text 
text - image 
image text 

當它縮短到窄版的，我（自然）風與：

image 
text 
text 
image 
image 
text 

我怎樣才能讓窄版這個樣子？

image 
text 
image 
text 
image 
text 

我使用了3行，每行都帶有2個col-md-6列。我可以在摺疊時更改列的順序嗎？

謝謝。

Answer 1

您可以使用Bootstrap Column Ordering對您的內容進行重新排序。請參閱文檔。

.red { 
 
    background: red; 
 
} 
 
.blue { 
 
    background: lightblue; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row red"> 
 
    <div class="col-md-6"> 
 
     <img src="http://placehold.it/350x150" class="img-responsive" alt=""> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <p>This is the most demandable and most used image editing service all over the world for ecommerce product selling. Don’t worry, we make it easy to ensure all your images fit your ecommerce image editing guideline. We resize, crop, remove borders, 
 
     and remove image background turning it to pure white, transparent or color background as per your guideline.</p> 
 
    </div> 
 
    </div> 
 
    <div class="row blue"> 
 
    <div class="col-md-6 col-md-push-6"> 
 
     <img src="http://placehold.it/350x150" class="img-responsive" alt=""> 
 
    </div> 
 
    <div class="col-md-6 col-md-pull-6"> 
 
     <p>For web-shop owners, we introduce our additional delivery of web-ready images. Add the image specifications (like crop size 800×800 px) and we will deliver web-ready image. We can fulfill the image size requirements for any ecommerce platform like 
 
     Amazon, eBay, Shopify, bigcommerce, volusion, squarespace etc.</p> 
 
    </div> 
 
    </div> 
 
    <div class="row red"> 
 
    <div class="col-md-6"> 
 
     <img src="http://placehold.it/350x150" class="img-responsive" alt=""> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <p>If you want to separate and modify different parts and features of the same product including its color, shape, and size, Multipath is the service you can take from us. We can deliver images with Alpha Channel, Layer Mask or Only Path.</p> 
 
    </div> 
 
    </div> 
 
    <div class="row blue"> 
 
    <div class="col-md-6 col-md-push-6"> 
 
     <img src="http://placehold.it/350x150" class="img-responsive" alt=""> 
 
    </div> 
 
    <div class="col-md-6 col-md-pull-6"> 
 
     <p>You have many different color variations of the same product but do not want to spend time taking photos of each one of them? No worries! You don’t have to. We can change the color and size of the same product as per your instruction to save you 
 
     from investing more of your time and money in taking photos.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

引導框架的工作基本上是Mobile First因此對於窄版本或者換句話說移動，以實現以下佈局

image 
text 
image 
text 
image 
text 

網格系統必須是移動第一，col-xs-*

<div class="row"> 
    <div class="col-xs-12 col-sm-6">Image</div> 
    <div class="col-xs-12 col-sm-6">Text</div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6">Image</div> 
    <div class="col-xs-12 col-sm-6">Text</div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6">Image</div> 
    <div class="col-xs-12 col-sm-6">Text</div> 
</div> 

現在在小型或中型的設備，你希望下面的佈局

image - text 
text - image 
image text 

可與push and pullcolumn ordering

<div class="row"> 
    <div class="col-xs-12 col-sm-6">Image</div> 
    <div class="col-xs-12 col-sm-6">Text</div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-sm-push-6">Image</div> 
    <div class="col-xs-12 col-sm-6 col-sm-pull-6">Text</div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6">Image</div> 
    <div class="col-xs-12 col-sm-6">Text</div> 
</div> 

Fiddle