Making a grid on bootstrap 4 - html

Question

Look at the below attached image.
I am trying to create a grid as showing on image using boostrap4. In destop, first column need to be col-5 width and other 3 equal. In mobile 1st col to be col-12 and other 3 equal.
My HTML:
<div class="row">
<article class="col-5">
<h1 class="text-uppercase">Some Contents</h1>
</article>
<article class="col">
<span class="counter">10</span>
</article>
<article class="col">
<span class="counter">10</span>
</article>
<article class="col">
<span class="counter">10</span>
</article>
</div>
This markup is working on destop. but not in mobile. Hope somebody may help me out.

Answer 1

Need to add breakpoints for small devices
.text-uppercase{
background:#f0f0f0
}
.counter{
background:#f0f0f0;
font-size:68px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
<article class="col-md-5 col-sm-12">
<h1 class="text-uppercase">Some Contents</h1>
</article>
<article class="col-md col-sm-4">
<span class="counter">10</span>
</article>
<article class="col-md col-sm-4">
<span class="counter">10</span>
</article>
<article class="col-md col-sm-4">
<span class="counter">10</span>
</article>
</div>

Answer 2

You can do it like this, you have to keep in mind that bootstrap is mobile first.
<div class="row">
<article class="col-12 col-md-6">
<h1 class="text-uppercase">Some Contents</h1>
</article>
<article class="col-12 col-sm-4 col-md-2">
<span class="counter">10</span>
</article>
<article class="col-12 col-sm-4 col-md-2">
<span class="counter">10</span>
</article>
<article class="col-12 col-sm-4 col-md-2">
<span class="counter">10</span>
</article>
</div>