How to make a responsive mosaic css fullscreen width

Question

Hello am having troubles to make this responsive mosaic, what I am trying to acomplish here is to keep the same order of the 7 images and if the screen is smaller make the mosaic full width but with their respective proportions in a mobile screen but maintaining the order.

this is my 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 is my demo: jsfiddle demo

Hope someone can help and thanks for reading.

Answer 1

You can achieve your desired functionality using media queries, the code below is specific for mobile devices, try it on;

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