вывод новостей в 3 колонки на весь экран

Доброго времени суток, прошу помощи! Несомненно нубский вопрос, но он ввел меня в ступор. Вывожу через pdo шаблон вывода новости, должно быть так eonythemes.com/themes/wb/boss/main/blog-masonry-fullwidth-3col.html, но выводится все друг за другом. код чист, но если смотреть уже через редактор кода, то у каждой колонки добавлены свои стили элемента, которые соответсвенно меняются если менять ширину экрана… И я не понимаю, что им подставляет значения расположения. Пример кода в шаблоне

<article class="entry entry-box">

                        <div class="entry-media embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="//player.vimeo.com/video/30173582?color=ffffff" width="500" height="281" allowfullscreen></iframe>
                        </div><!-- End .entry-media -->

                        <div class="entry-content-wrapper">
                            <span class="entry-date">5<span>Feb</span></span>
                            <span class="entry-format"><i class="fa fa-file-video-o"></i></span>

                            <h2 class="entry-title"><a href="single.html">Cras tempor, eros sit amet fringilla lacinia, nisi enim bibendum dui.</a></h2>
                        

                            <div class="entry-content">
                                <p>Integer cursus sodales hendrerit. Sed tempor augue tellus, non ullamcorper enim ullamcorper sit amet. Nullam ut mattis justo. Nulla et purus pulvinar varius purus non.</p>
                            </div><!-- End .entry-content -->
                        </div><!-- End .entry-content-wrapper -->
<footer class="entry-footer clearfix">
                            <span class="entry-cats">
                                <span class="entry-label"><i class="fa fa-tag"></i></span><a href="#">Design</a>
                            </span><!-- End .entry-tags -->
                            <span class="entry-separator">/</span>
                            <a href="#" class="entry-comments">4 Comments</a>
                            <span class="entry-separator">/</span>
                            by <a href="#" class="entry-author">Eon</a>
                            
                        </footer>

                    </article>

Это у меня вбито в шаблон для pdo, конечно же с выводом своих картинок, ссылок и тд. и выводится все новости друг за другом.

а вот, что в коде оригинала, в шаблоне, например новости по центру, то есть 2я.

<article class="entry entry-box" style="position: absolute; left: 601px; top: 0px;">

                        <div class="entry-media">
                            <figure>
                                <a href="single.html">
                                    <img src="images/blog/post4.jpg" alt="Entry Title">
                                </a>
                            </figure>
                        </div><!-- End .entry-media -->

                        <div class="entry-content-wrapper">
                            <span class="entry-date">11<span>Feb</span></span>
                            <span class="entry-format"><i class="fa fa-file-image-o"></i></span>

                            <h2 class="entry-title"><a href="single.html">Consec tetur adipi scing elit nam molestiae facere.</a></h2>
                        

                            <div class="entry-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum condimentum erat, quis imperdiet dolor maximus nec. Etiam felis erat, suscipit in ante ut, tincidunt tempor justo.</p>
                            </div><!-- End .entry-content -->
                        </div><!-- End .entry-content-wrapper -->

                        <footer class="entry-footer clearfix">
                            <span class="entry-cats">
                                <span class="entry-label"><i class="fa fa-tag"></i></span><a href="#">Design</a>
                            </span><!-- End .entry-tags -->
                            <span class="entry-separator">/</span>
                            <a href="#" class="entry-comments">4 Comments</a>
                            <span class="entry-separator">/</span>
                            by <a href="#" class="entry-author">Eon</a>
                            
                        </footer>

                    </article>

В общем всем блокам подставляются свои стайлы с координатами, у меня же без них
как сделать, чтобы новости выводились так же??? Или есть другое решение, чтобы новости были друг от друга в адаптивном шаблоне. Помогите пожалуйста, люди добрые! Спасибо!