我尝试在bootstrap网格的帮助下分离页面上的div。但是尽管我努力了很长时间，我还是无法达到预期的结果。我的目标结果如下：
Result on biggest screen
Result on smaller screen
Result on smallest screen (the div on left doesn't get displayed)

***_Layout. html***文件中的代码：

<div class="container-fluid">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

<h4 class="text-center mt-3 mb-2">Onze shirts:</h4>
<div class="row justify-content-center">
    <article class="border border-info mh-100 .d-none .d-md-block col-xl-3 col-lg-1 col-md-1 ml-2">Hier komt de reclame te staan</article>
    <div class="row justify-content-center">
    @foreach (Models.Product product in Model.producten)
    {
        <div class="justify-content-center border border-info text-center col-10 col-xl-3 col-sm-5 col-md-5 mb-3 mt-3 ml-2" style="width:20%">
        <p><img src='Images\@product.Afbeelding' height="75" width="60" /></p>
        <p>@product.Naam</p>
        @if (product.Aanbieding != 0)
        {
            <p>van: <del>€@product.Prijs</del>  voor: €@product.Aanbieding</p>
        }
        else
        {
            <p>voor: €@product.Prijs</p>
        }
        <p><a class="btn btn-primary" href="~/Bestel?artikelnummer=@product.Id">bestel</a></p>
        </div>
    }
    </div>
</div>

我正尝试在引导网格的帮助下分离页面上的div。