需要關於重新排序引導列的建議

我需要按照特定順序對這些列進行重新排序，以減小引導列中的col-md。我試過這個答案Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3，它僅適用於3列，但不適用於列需要在移動視圖中堆疊的特定方式。這種方式的作品，但它感覺骯髒的隱藏和解隱藏列。有沒有更簡單的方法來實現這一目標？需要關於重新排序引導列的建議

桌面視圖這裏

手機查看這裏

<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Document</title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
</head> 
<body> 
    <div class="container"> 
    <div class="row"> 
    <div class="col-md-12 visible-md visible-lg"> 
     <div class="col-md-4"><div class="well">1</div></div> 
     <div class="col-md-4"><div class="well">2</div></div> 
     <div class="col-md-4"><div class="well">ad1</div></div> 
     <div class="col-md-4"><div class="well">3</div></div> 
     <div class="col-md-4"><div class="well">4</div></div> 
     <div class="col-md-4"><div class="well">ad2</div></div> 
     <div class="col-md-4 col-md-push-8"><div class="well">ad3</div></div> 
    </div> 
    <!--col-md-12 visible-md visible-lg --> 

    <div class="col-xs-12 visible-xs visible-sm"> 
     <div class="col-xs-12"><div class="well">ad1</div></div> 
     <div class="col-xs-12"><div class="well">1</div></div> 
     <div class="col-xs-12"><div class="well">ad2</div></div> 
     <div class="col-xs-12"><div class="well">2</div></div> 
     <div class="col-xs-12"><div class="well">3</div></div> 
     <div class="col-xs-12"><div class="well">ad3</div></div> 
     <div class="col-xs-12"><div class="well">4</div></div> 
    </div> 
    <!-- col-xs-12 visible-xs visible-sm --> 

    </div> 
    <!-- row --> 
</div> 
<!-- container --> 
</body> 
</html>

Codepen here

來源

2016-05-05 MoxDev

嗨Pamblam我試過這個解決方案，它適用於3列，但我不能讓它按特定順序工作，我需要它們在移動視圖中顯示。如果你看看屏幕截圖，他們需要按照特定的順序。 – MoxDev

請檢查：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row hidden-xs hidden-sm"> 
 
    <div class="col-md-8"><div class="well">728x90 Ad</div></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-8"><div class="well">Title</div></div> 
 
    <div class="col-md-4"><div class="well">ad1</div></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-4"><div class="well">1</div></div> 
 
    <div class="col-md-4 col-md-push-4"><div class="well">ad2</div></div> 
 
    <div class="col-md-4 col-md-pull-4"><div class="well">2</div></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-4"><div class="well">3</div></div> 
 
    <div class="col-md-4 col-md-push-4"><div class="well">ad3</div></div> 
 
    <div class="col-md-4 col-md-pull-4"><div class="well">4</div></div> 
 
    </div> 
 

 
</div> <!-- container -->

來源

2016-05-05 20:14:52

輝煌我的朋友謝謝你。我嘗試了類似的東西，但似乎無法正確定位。 – MoxDev

需要關於重新排序引導列的建議

回答

相關問題