Вывод статей в блоках разного размера

Добрый день!
Подскажите, пожалуйста, как можно сделать вывод статей в шаблон с элементами разного размера? Например,

<div class="articles">
    <div class="container-wrap">
        <div class="row">
            <div class="col-md-6">[[$tplpost]]</div>
            <div class="col-md-6">[[$tplpost]]</div>
        </div>
        <div class="col-md-12">[[$tplpost]]</div>
        <div class="row">
            <div class="col-md-4">[[$tplpost]]</div>
            <div class="col-md-4">[[$tplpost]]</div>
            <div class="col-md-4">[[$tplpost]]</div>
        </div>
   </div>
</div>

чанк tplpost

<div class="block-item">
    <div class="block-img" style="background-image: url([[+tv.image]]);">
	    <div class="block-body">
		<h2 class="block-title"><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
		<p>[[+introtext]]</p>
	    </div>
	</div>
</div>

Когда добавляю в шаблон

<div class="articles">
	<div class="container-wrap">
		<div class="row">
                    <div class="col-md-6">
			[[!pdoPage?
				      &element=`pdoResources`
				      &parents=`[[*id]]`
				      &tpl=`tplpost`
				      &includeTVs=`image`
				      &hideContainers=`1`
				      &limit=`20`
				      &tplPageWrapper=@INLINE <ul class="pagination">[[+prev]][[+pages]][[+next]]</ul>
				    ]]
                    </div>
		</div>
        </div>
</div>

выводятся разные статьи, но все шириной col-md-6. А как прописать, чтобы выводились разные статьи под следующие разные по ширине блоки, указанные в шаблоне?
Я новичок, буду признателен за подробный ответ

<div class="articles">
	<div class="container-wrap">
		<div class="row">
			[[!pdoPage?
			  &element=`pdoResources`
			  &parents=`[[*id]]`
			  &tpl=`tplpost`
			  &includeTVs=`image,md_width`
			  &hideContainers=`1`
			  &limit=`20`
			  &tplPageWrapper=@INLINE <ul class="pagination">[[+prev]][[+pages]][[+next]]</ul>
			]]
		</div>
	</div>
</div>

<div class="col-md-[[+tv.md_width:default=`6`]]">
	<div class="block-item">
		<div class="block-img" style="background-image: url([[+tv.image]]);">
			<div class="block-body">
			<h2 class="block-title"><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
			<p>[[+introtext]]</p>
			</div>
		</div>
	</div>
</div>