How to make 4 columns in bootstrap grid break to two then one column

Question

Here is my bootstrap code so far:

<div class="container-flex">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
</div>

A simple 4 column setup. Currently it breaks into single column on large (lg class) breakpoint. Is there any way I can set it up so it breaks into two columns on large breakpoint then into one column on medium (md class ) breakpoint? I've been looking over bootstrap tutorials and can't find any solution.

Here's my jsfiddle: https://jsfiddle.net/noe562h0/

Answer 1

Try this

<div class="container-flex">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-3">1</div>
        <div class="col-12 col-md-6 col-lg-3">2</div>
        <div class="col-12 col-md-6 col-lg-3">3</div>
        <div class="col-12 col-md-6 col-lg-3">4</div>
    </div>
</div>

Here are Bootstrap 4 grid references Bootstrap and w3schools.com documentation.