Cách thay đổi thứ tự div col trong Twitter Bootstrap 3

Question

Tôi đang cố gắng thay đổi thứ tự ngăn xếp của div col trong Twitter Bootstrap ở chế độ xem di động. Tôi muốn các văn bản trong col-md-7 được kéo trên đầu trang của hình ảnh trong col-md-5 trong xem di động, nhưng khi xem trên máy tính để bàn của div col vẫn giữ nguyên.

Đây là mã tôi đang sử dụng

<div class="row featurette"> 
    <div class="col-md-5"> 
     <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image"> 
    </div> 
    <div class="col-md-7"> 
     <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> 
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> 
    </div> 
    </div> 

Đây là một bản demo Bootly về những gì tôi đang cố gắng để hoàn thành Bootly demo

Answer 1

Một cách xấu xí để làm điều này là suy nghĩ di động trước. Đặt hàng các cột theo cách bạn muốn chúng xếp chồng lên xs/sm và sau đó sử dụng kéo và đẩy để sắp xếp lại chúng cho màn hình lớn hơn. Một cái gì đó như thế này nên làm việc:

<div class="row featurette"> 
    <div class="col-md-7 col-md-push-5"> 
     <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> 
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> 
    </div> 
    <div class="col-md-5 col-md-pull-7"> 
     <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image"> 
    </div> 
    </div> 

(. Tôi sẽ đã thử nghiệm nó, nhưng liên kết giới thiệu của bạn chỉ dẫn đến một thông báo lỗi và tôi quá lười biếng để làm cho bản demo của riêng tôi)

Answer 2

Hãy thử sử dụng push sau và kéo lớp:

<div class="row featurette"> 
<div class="col-md-5 col-md-push-7"> 
    <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image"> 
</div> 
<div class="col-md-7 col-md-pull-5"> 
    <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> 
    <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> 
</div> 

Bạn có thể đọc thêm bootstrap 3's CSS documentation