html - How to make a responsive mosaic css fullscreen width -

hello having troubles make responsive mosaic, trying acomplish here keep same order of 7 images , if screen smaller make mosaic full width respective proportions in mobile screen maintaining order.

this css:

#mosaic {               width: 100%;               background-color: aqua;             }             .largeimg, .smallimg {               /*display: inline-block;*/               float: left;             }             .largeimg {               /*width: 40%;*/               background-color: #165384;             }             .smallimg {               /*width: 60%;*/               background-color: #ef0808;             }              .col-wrap {               display: inline-block;             } 

this demo: jsfiddle demo

hope can , reading.

you can achieve desired functionality using media queries, code below specific mobile devices, try on;

@media , (max-width: 658px) { // mobile devices     #mosaic {          display:block; // have each musaic in 1 line     } }