How to use Col-md .

Question

Hello everyone I have face a issue .How to use col-md section in foreach loop.I want to divide two section one for blog detail second for blog categories .

 

for e.g

 

multiple bolg display left side and right side blog categories

 

This is my code

<div class="container">
<div class="row">
<section class="blog-layout-content">
@foreach (var blogPost in Model.Items)
{
<div class="col-md-10">
<div class="blog-layout-content--columns-reverse">
<div class="blog-layout-content__col">
<article class="blog-post-teaser">
<header class="blog-post-teaser-header">
<h2 class="blog-post-teaser-title">
<a href="@blogPost.FullPath">@blogPost.Title</a>
</h2>
<section class="blog-post-teaser-meta">
<time datetime="">@blogPost.PostDate</time>
</section>
</header>
<section class="blog-post-excerpt">

<p class="card-text">@blogPost.ShortDescription</p>
<p class="card-text">@blogPost.TestHtml</p>

<div class="blog-post-teaser-read-more">
<a class="blog-post-teaser-read-more-btn" href="@blogPost.FullPath">Read more </a>
</div>
</section>
</article>
</div>
</div>
</div>
}
</section>
<div id="blog-SidebarCategories">
@await Component.InvokeAsync("SidebarCategories")
</div>
</div>
</div>