How to edit channel entries in expression engine depending on the order they are displayed

Question

I am exporting news articles into a page using channel entries in expression engine. I want the first article that appears to be 'col-md-4' the next 2 articles to be within 'col-md-3' the next 2 to be within 'col-md-3' and the last 3 articles to be within a 'col-md-2' container.

I have tried various ways to do this. I thought I had worked it out with the code below by editing the entries using an {if:else} statement and using the {count} variable. Although I realised I was selecting the entrie with that ID for example {count == 1} was the article with ID 1, not the first article to appear on the page.

Does anyone know how I can edit an article depending on the order it appears on the page?

 {exp:channel:entries channel="news|blogs" limit="8" dynamic="no"}

            {if count == 1}
            <div class="col-md-4">
                <div class="item news-v2">
                    <div class="news-v2-badge">
                        {if news_thumbnail == ""}
                        <a href="/news/article/{url_title}">
                            <img class="lazyOwl img-responsive" src="home_logo_filler_news_events.png" alt="">
                        </a>
                        {if:else}
                        <a href="/news/article/{url_title}">
                            <img class="lazyOwl img-responsive" src="{news_thumbnail}" alt="">
                        </a>
                        {/if}

                    </div>
                    <h4><a href="/news/article/{url_title}">{title}</a></h4>
                    <p>{news_tagline}</p>
                    <p>
                        <span>{entry_date format="%d"}</span>
                        <small>{entry_date format="%M"}</small>
                        <small>{entry_date format="%Y"}</small>
                    </p>
                </div>
            </div>
            {if:elseif count == 2 || count == 3 || count == 4 || count == 5}
            <div class="col-md-3">
                <div class="item news-v2">
                    <div class="news-v2-badge">
                        {if news_thumbnail == ""}
                        <a href="/news/article/{url_title}">
                            <img class="lazyOwl img-responsive" src="home_logo_filler_news_events.png" alt="">
                        </a>
                        {if:else}
                        <a href="/news/article/{url_title}">
                            <img class="lazyOwl img-responsive" src="{news_thumbnail}" alt="">
                        </a>
                        {/if}

                    </div>
                    <h4><a href="/news/article/{url_title}">{title}</a></h4>
                    <p>
                        <span>{entry_date format="%d"}</span>
                        <small>{entry_date format="%M"}</small>
                        <small>{entry_date format="%Y"}</small>
                    </p>
                </div>
            </div>
            {if:elseif count == 6 || count == 7 || count == 8}
            <div class="col-md-2">
                <div class="item news-v2">
                    <h4><a href="/news/article/{url_title}">{title}</a></h4>
                    <p>{news_tagline}</p>
                    <p>
                        <span>{entry_date format="%d"}</span>
                        <small>{entry_date format="%M"}</small>
                        <small>{entry_date format="%Y"}</small>
                    </p>
                </div>
            </div>
            {/if}

            {/exp:channel:entries}

Answer 1

You could also use {switch} to vary the div classes. Not sure if this is a better way, but its an alternative to if/else

<div class="col-md-{switch='4|3|3|3|3|2|2|2'}">

Just remember that switch loops, so after the 8th entry you'll get a col-md-4 again.

Answer 2

Not sure what order you're wanting to output the entries, but assuming it's date:

{exp:channel:entries 
    channel="news|blogs" 
    limit="8" 
    dynamic="no"
    orderby="date"
    sort="desc"
}
    {if count == 1}
        <div class="col-md-4">
            ...
        </div>
    {if:elseif count <= 5}
        <div class="col-md-3">
            ...
        </div>
    {if:else}
        <div class="col-md-2">
            ...
        </div>
    {/if}
{/exp:channel:entries}

Or if wanting to order by entry_id from latest, use parameter:

orderby="entry_id"

https://docs.expressionengine.com/latest/channel/channel_entries.html#id46