CSS, reattivo, crea scatole fluttuanti impilate

Question

Voglio creare un layout reattivo in cui ci sono due colonne, sinistra e destra. Su schermi più piccoli le caselle sulla sinistra devono spostarsi in determinate posizioni. Funziona benissimo con il mio codice ma il problema è che su schermi di grandi dimensioni c'è una fessura sul lato destro tra le scatole.

Come posso risolverlo?

L'idea e il problema

JSFIDDLE

Quando si guarda al seguente jsfiddle, si vede che funziona per il piccolo schermo, ma i problemi dont mossa sul grande schermo. So che il modo in cui lo faccio è sbagliato, ma come posso ottenere questo risultato desiderato con i CSS?

http://jsfiddle.net/7rnum9xk/

.main{ 
    width:65%; 
    height:125px; 
    margin-bottom:10px; 
    float:left; 
} 
.small{ 
    width:35%; 
    height:25px; 
    float:left; 
    margin-bottom:5px; 
} 

@media screen and (max-width: 692px) { 
    .main, .small{ 
     width:100%; 
     float:none; 
    }  
} 

Answer 1

provare questo codice DEMO

.main{ 
    width:65%; 
    height:125px; 
    margin-bottom:10px; 
    float:left; 
    display: inline-block; 
} 
.small{ 
    width:35%; 
    height:25px; 
    /* float:left; */ 
    display:inline-block; 
    margin-bottom:5px; 
} 

@media screen and (max-width: 692px) { 
    .main, .small{ 
     width:100%; 
     float:none; 
    } 

} 

/* colors */ 
.main{background:#d0d0d0;} 
.orange{background:#ecbd00;} 
.green{background:#6aec00;} 
.blue{background:#00c8ec;} 
.purple{background:#c300ec;} 
.red{background:#e93a73;} 

Answer 2

Il problema è la struttura del codice HTML, avete messo il div principale dopo ogni alle piccole div. Quindi stamperà prima quel div.

Quello che vorrei suggerire è cambiare la struttura html in questo modo;

float la colonna di sinistra a sinistra e la colonna di destra a destra.

Poi posizionare attorno ad un div intorno

aggiungere css media in modo che a 800px (o qualsiasi altra cosa si richiede) si può display none; su .hide800 questo nasconde la div, quindi aggiungere un div intorno al vostro html attuale, ma mettere uno stile in linea di visualizzazione nessuno. Poi a 800px (o qualunque dimensione nascondi il primo div) aggiungi css a display: block !Important;

In questo modo funzionerà come se ne hai bisogno per i browser a larghezza intera, ma poi quando lo schermo è abbastanza piccolo da cambiare la struttura puoi usare il tuo codice attuale

html;

<div class="hide800"> 
    <div class="left-col"> 
    <div class="main"> 
    </div> 
    <div class="main"> 
    </div> 
    <div class="main"> 
    </div> 
    </div> 
    <div class-right-col"> 
    <div class="small orange"> 
    </div> 
    <div class="small green"> 
    </div> 
    <div class="small blue"> 
    </div> 
    <div class="small purple"> 
    </div> 
    <div class="small red"> 
    </div> 
    </div> 
</div> 
<div class="show800" style="display:none;"> 
<div class="main"> 
</div> 
<div class="small orange"> 
</div> 
<div class="small green"> 
</div> 

<div class="main"> 
</div> 
<div class="small blue"> 
</div> 
<div class="small purple"> 
</div> 

<div class="main"> 
</div> 
<div class="small red"> 
</div> 
</div> 

css;

.left-col { 
float: left; 
} 
.right-col { 
float: right; 
} 
@media screen and(max-width:800px){ 
.hide800 { 
display: none; 
} 
.show800 { 
display: block !Important; 
} 
} 

Se avete bisogno di spiegare ulteriormente fatemi sapere :)