引導列排序與4列

我想用自舉做柱排序。在桌面屏幕我想要這個訂單。引導列排序與4列

------ -------------------- 
|a |b   |c  | 
------|   |---------- 
     |   |d  | 
     |   |---------- 
     ----------

在小屏幕上，我想要這個訂單。

------ ----------- 
|a |b   | 
------|   | 
|c |   | 
------|----------| 
|d | 
-------

從我的代碼，我明白了。在上面的圖片錯誤之前。現在我改變了上面的正確圖像。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 

 
    <div class="col-sm-4" style="color:black;background:yellow">A 
 
    </div> 
 
    <div class="col-sm-6" style="color:white;"> 
 
    <div class="row"> 
 
     <div class="col-sm-12 " style="color:white;background:green">B<br>B<br>B<br>B</div> 
 
     <div class="col-sm-4 col-sm-pull-8 " style="color:white;background:red">C</div> 
 
     <div class="col-sm-12 col-sm-pull-8 " style="color:white;background:blue">D</div> 
 
    </div> 
 
    </div> 
 

 
</div>

來源

2017-06-21 Phyo

請仔細閱讀[這個]（https://meta.stackoverflow.com/a/290704/2314737）。如果你有不同的問題，請發一個新的問題 – user2314737

我回到你原來的問題，因爲「_Drastically改變一個問題 - 尤其是一個答案 - _ [...] _失效所有的回答者放入他們的工作回答（s）。「請參閱：[問題的變化太多了嗎？]（https://meta.stackoverflow.com/questions/290297/how-much-change-to-the-question-is-太多） – user2314737

這是你想達到什麼樣的？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
        <div class="row"> 
 
         <div class="col-sm-6 col-xs-12"> 
 
          <div style="background-color:yellow"> 
 
           1 
 
          </div> 
 
          <div style="background-color:green"> 
 
           2 
 
          </div> 
 
          <div style="background-color:red"> 
 
           3 
 
          </div> 
 

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

 
          <div style="background-color:blue"> 
 
           4 
 
          </div> 
 
         </div> 
 
        </div>

來源

2017-06-21 20:36:29 Jonathan

'小屏幕'圖像是錯誤的。我不知道爲什麼。我已經改變了'小屏幕圖像。基本上我想要的是按照a，b，c，d這個順序在小屏幕中堆疊。 – Phyo

您可以創建等於大小（col-sm-6類）的兩列一行。

在最左邊的列嵌套三人行，因爲他們佔據默認不需要一個類中的所有可用的水平空間（相同的答案above）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div style="color:black;background:yellow">A</div> 
 
    <div style="color:white;background:red">C</div> 
 
    <div style="color:white;background:blue">D</div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <div style="color:white;background:green">B<br>B<br>B<br>B</div> 
 
    </div> 
 
</div>

來源

2017-06-21 21:23:20 user2314737

'小屏幕'圖像是錯誤的。我不知道爲什麼。我已經改變了'小屏幕圖像'。基本上我想要的是按照a，b，c，d這個順序在小屏幕中堆疊 – Phyo

引導列排序與4列

回答

相關問題