定位的div上一個響應式佈局

Question

我有這樣的HTML和CSS：

<div class="section group"> 
    <div class="col span_1_of_3"> 
    <div id="busqueda"> 
     content 
     </div> 
    This is column 1 

    </div> 
    <div class="col span_1_of_3"> 
    This is column 2 
<div id="busqueda"> 
     content 
     </div> 
    </div> 
    <div class="col span_1_of_3"> 
    This is column 3 
<div id="busqueda"> 
     content 
     </div> 
    </div> 
</div> 

CSS：

/* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1.6%; 
} 
.col:first-child { margin-left: 0; } 

/* GROUPING */ 
.group:before, 
.group:after { content:""; display:table; } 
.group:after { clear:both;} 
.group { zoom:1; /* For IE 6/7 */ } 

/* GRID OF THREE */ 
.span_3_of_3 { width: 100%; } 
.span_2_of_3 { width: 66.13%; } 
.span_1_of_3 { width: 32.26%; } 

/* GO FULL WIDTH BELOW 480 PIXELS */ 
@media only screen and (max-width: 480px) { 
    .col { margin: 1% 0 1% 0%; } 
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } 
} 

我的問題是，那麼我有內部的各個.span當幾個的div我調整它們重疊的窗口，我希望他們堆疊，一個在另一個下面時，我調整窗口的CSS爲該div是：

#busqueda { 
    /*white-space: nowrap;*/ 
    display: inline-block; 
    background-color: #FFFFFF; 
    color: #000000; 
    border: 5px solid #6D6D6D; 
    padding: 19px; 
    font-family: 'trebuchet ms'; 
    font-style: oblique; 
    font-weight: normal; 
    font-variant: normal; 
    border-radius: 13px; 
    margin-right: 55%; 
    border-color:#fd8a17; 
    margin-bottom:50px; 
} 

任何想法我應該怎麼做才能做到這一點？我試過把它們漂浮起來無濟於事。

Answer 1

似乎你的第一列的html與其他兩個不同。 所以我在這裏做了調整：https://jsfiddle.net/qrbcf8ne/1/ 下面是代碼的變化，我也在每個跨度增加一個DIV：

<div class="section group"> 
    <div class="col span_1_of_3">This is column 1 
     <div id="busqueda">content11</div> 
     <div id="busqueda">content22</div> 
    </div> 
    <div class="col span_1_of_3">This is column 2 
     <div id="busqueda">content21</div> 
     <div id="busqueda">content22</div> 
    </div> 
    <div class="col span_1_of_3">This is column 3 
     <div id="busqueda">content31</div> 
     <div id="busqueda">content32</div> 
    </div> 
</div> 

希望這有助於。