Place div's of different heights in a responsive parent div

Question

Can somebody help me with optimizing this code? I'd like to have some control about placement. Masonry doesn't do the job in that way.

What I have done now is to create some sets of columns. For different screen width one of the column sets will be active. Big screens have 3 columns middle screens 2 and small screens one one column. The columns are filled with several divs with the same width but different heights.

In this case the html loads double content, which is turned off by css.

Can somebody help me to find a way to avoid double content?

At the moment of writing it is in use by [www.pcsupportaanhuis.nl][1]

 #l_wrapper_topic_left {
    margin: 0;
    margin-right: 2%;
    padding: 0;
    width: 32%;
    float:left;
    overflow: auto;
    clear: both;
    display: inline;
    }
		
   #l_wrapper_topic_middle {
    margin: 0;
    margin-right: 2%;
    padding: 0;
    width: 32%;
    float:left;
    overflow: auto;
    display: inline;
   }
		
   #l_wrapper_topic_right {
    margin: 0;
    padding: 0;
    width: 32%;
    float: right;
    overflow: auto;
    display: inline;
  }
		
   #m_wrapper_topic_left {
    display: none;
  }
			
  #m_wrapper_topic_right {
    display: none;
  }
			
   #s_wrapper_topic {
    display: none;
  }
   
   .incolumn {
    margin-bottom: 4%;
  }

  @media only screen and (max-height: 480px) 
    and (max-width: 531px) and (orientation: landscape) {
    #m_wrapper_topic_left {
        margin: 0% 2% 0% 0%;
        padding: 0;
        width: 49%;
        float:left;
        overflow: auto;
        clear: both;
        display: inline;
      }		
		
         #m_wrapper_topic_right {
          margin: 0;
         padding: 0;
        width: 49%;
        float: right;
        overflow: auto;
        display: inline;
       }
		
       #l_wrapper_topic_left {
         display: none;
        }
			
       #l_wrapper_topic_middle {
        display: none;
       }
			
       #l_wrapper_topic_right {
        display: none;
	   }
			
      .incolumn {
        margin-bottom: 4%;
      }
   }

	<div id="l_wrapper_topic_left">
		
		<div class="cblock incolumn" >
			<?php include('topics/t1.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t4.php'); ?> 
		</div>

		</div>

	<div id="l_wrapper_topic_middle">
		<div class="cblock incolumn" >
			<?php include('topics/t2.php'); ?> 
		</div>
		

		</div>


	<div id="l_wrapper_topic_right">
		<div class="cblock incolumn" >
			<?php include('topics/t3.php'); ?> 
		</div>

	</div>

	<div id="m_wrapper_topic_left">
		
		<div class="cblock incolumn" >
			<?php include('topics/t1.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t3.php'); ?> 
		</div>
		<div class="cblock incolumn" >
			<?php include('topics/t4.php'); ?> 
		</div>
		
		
	</div>

	<div id="m_wrapper_topic_right">
		<div class="cblock incolumn" >
			<?php include('topics/t2.php'); ?> 
		</div>
		

		
	</div>

	<div id="s_wrapper_topic">
		<div class="cblock incolumn" >
			<?php include('topics/t1.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t2.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t3.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t4.php'); ?> 
		</div>
				
	</div>

Answer 1

Introducing... CSS Flexbox (Tada)!

The markup.

<div id="topics-wrapper">
    <div class="topic-1"><?php include('topics/t1.php'); ?></div>
    <div class="topic-2"><?php include('topics/t2.php'); ?></div>
    <div class="topic-3"><?php include('topics/t3.php'); ?></div>
    <div class="flex-ghost"></div>
    <div class="topic-4"><?php include('topics/t4.php'); ?></div>
</div>

We'll set #topics-wrapper to be our flexbox container. Put space between children when necessary, and allow wrapping.

#topics-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

Hide the ghost element for now, it'll come in handy later.

.flex-ghost { display: none; }

Normally, we want children to be 32% in width.

#topics-wrapper > div {
    flex-basis: 32%;
}

On medium screens, switch to 49%.

@media (...) {
    #topics-wrapper > div {
        flex-basis: 48%;
    }
}

Go all out on small screens.

@media (...) {
    #topics-wrapper > div {
        flex-basis: 100%;
    }
}

Now, we want column 4 on the left on medium screens, so in your medium media query, allow the ghost to fill the space it would take.

.flex-ghost { display: block; }

You'll never completely be able to imitate Masonry, but hopefully I've given you a good start. Especially experiment with flex-direction and flex-wrap. Learn Flexbox, it'll change the way you write CSS forever!