Javascipt issue on custom theme

Do you know about JavaScript dependencies? If some JavaScript depends on another, it must be loaded after the dependencies.

In your codepen you are loading JavaScripts in the correct order:

1. jQuery
2. Bootstap (depends on jQuery)
3. Masonry (depends on jQuery)
4. ccd-javsscript (depends on Masonry and jQuery)

One the features of WordPress is the dependencies manager for JavaScript and CSS. But you are not using it. The third parameter of wp_enqueue_script() ìs where you can declare the dependencies of the script and WordPress will load them in the correct order:

// Masonry script depends on jQuery (already registered by WordPress)
wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js', array('jquery') );

// ccd-javascripts depends on jQuery and the "masonry" script
wp_enqueue_script( 'ccd-javascripts', get_template_directory_uri().'/js/ccd-javascripts.js', array( 'jquery', 'masonry' ) );