Fluidity With Cards Of Different Lengths

I've been using a card style for a website I've been designing. As you can see, it is made of individual cards to separate the information and make the fact that it is separate obv

Solution 1:

You can build a layout like this using media queries, that way at phone sizes you will be able to make your divs larger and appear to be bigger on the screen.

http://jsfiddle.net/e9ypqy5t/11/

#container-one{width: 100%; height: 1200px; background-color: lightblue;}
#container-two{width: 800px; height: calc(100% - 6px); border-style: solid; border-color: red;}
.container-two-left{width: calc(50% - 6px); height: 50px; border-style: solid; border-color: green; float: left; margin-top: 10px;}
.container-two-right{width: calc(50% - 6px); height: 50px; border-style: solid; border-color: orange; float: left; margin-top: 10px;}

@media (max-width: 900px){
    #container-two{width: calc(100% - 12px);}
}
@media (max-width: 600px){
    .container-two-left{width: calc(100% - 6px);}
    .container-two-right{width: calc(100% - 6px)}

}