позиционирования дивы после друг друга на гибкой компоновки

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 и когда я изменить размер окна, они перекрывают друг друга, я бы хотел, чтобы они складывают одна под другой, когда я изменить размер окна в 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> 

Надеется, что это помогает.