Probleme mise en page php

Bonjour,

Voilà; certains posts (actualité, sous-pages) créer sur d'autres pages son pousser sur la page d’accueil dans la partie "Features"

https://assets-jpcust.jwpsrv.com/thumbs/SLL4JD50-320.jpg?1487556058141jpg

J'aimerai pouvoir changer la disposition et la taille de chaque posts comme sur cette image

http://assets-jpcust.jwpsrv.com/thumbs/UYODrQIV-1280.jpg

( j'ai pu faire les changement en changeant les tailles des GRID (col-md-*) par "l'outil de déveleopement " de firefox
.j'ai essayé avec mes notion d'html de le mettre en place sur la page "home.html.twig" mais je suis bien limiter.

Voici un le bout de code où tout se passe. je peux envoyé le code de toute la page si besoin..

Code : Tout sélectionner

             </div>

        {% endif %}


    </div>

{% endblock %}

{% block body %}

    <div class="smart-box-head">
        <h3 class="light-title title">Features</h3>
    </div>

    {% set firstActualite = [] %}
    {% set otherActualites = [] %}
    {% set allOtherActualites = [] %}

    {% if actualites is not empty %}

        {% set actualite = actualites[0] %}
        {% set otherActualites = actualites | slice(1, 4) %}
        {% set allOtherActualites = actualites | slice(5) %}

    {% endif %}

    <div class="row">

        <div class="col-md-4">

            <div class="video-item">

                <div>

                    {% if actualite.Content.Thumb %}

                        <div class="item-thumbnail">
                            <a href="{{ path('cl_blog_post', {'slug' : actualite.Content.slug }) }}">
                                <img src="{{ actualite.Content.Thumb.url }}" alt="{{ actualite.Content.name }}"/>
                            </a>
                        </div>

                    {% endif %}

                    <div class="item-text">

                        <div class="item-head">
                            <h3>
                                <a href="{{ path('cl_blog_post', {'slug' : actualite.Content.slug }) }}">{{ actualite.Content.name }}</a>
                            </h3>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-md-8">

            {% for actualite in otherActualites %}

                {% if loop.index % 2 == 1 %}
                    <div class="row">
                {% endif %}

                <div class="col-md-6">

                    <div class="video-item">

                        <div>

                            {% if actualite.Content.Thumb %}

                                <div class="item-thumbnail">
                                    <a href="{{ path('cl_blog_post', {'slug' : actualite.Content.slug }) }}">
                                        <img src="{{ actualite.Content.Thumb.url }}"
                                             alt="{{ actualite.Content.name }}"/>
                                    </a>
                                </div>

                            {% endif %}

                            <div class="item-text">

                                <div class="item-head">
                                    <h3>
                                        <a href="{{ path('cl_blog_post', {'slug' : actualite.Content.slug }) }}">{{ actualite.Content.name }}</a>
                                    </h3>


                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                {% if loop.index % 2 == 0 or loop.last %}
                    </div>
                {% endif %}

            {% endfor %}

        </div>

    </div>

    {% for actualite in allOtherActualites %}

        {% if loop.index % 3 == 1 %}
            <div class="row">
        {% endif %}

        <div class="col-md-4">

            <div class="video-item">

                <div>

                    {% if actualite.Content.Thumb %}

                        <div class="item-thumbnail">
                            <a href="{{ path('cl_blog_post', {'slug' : actualite.Content.slug }) }}">
                                <img src="{{ actualite.Content.Thumb.url }}" alt="{{ actualite.Content.name }}"/>
                            </a>
                        </div>

                    {% endif %}

                    <div class="item-text">

                        <div class="item-head">
                            <h3>
                                <a href="{{ path('cl_blog_post', {'slug' : actualite.Content.slug }) }}">{{ actualite.Content.name }}</a>
                            </h3>


                        </div>

                    </div>

                </div>

            </div>

        </div>

        {% if loop.index % 3 == 0 or loop.last %}
            </div>
        {% endif %}

    {% endfor %}
    [/color]
   

j'espere que quelqu'un pourra m'aider.Merci d'avance à ceux qui y jetteront on coup d'oeil...
Cordialement