BootstrapVue how to push b-button to bottom of b-card element

Question

Can't push b-button down to the bottom of the b-card.

I've tried:
Bootstrap class= flex-box like i would with just a plain <div>(This example below)
Inline styling with flex box.
Using b-card-footer with button inside Making just the b-botton a standard html button with bootstrap btn class
Adding an additional b-row below b-card and adding the mt-auto to that

Edit..Just tried this as well...

<b-row align-v="end">
    <b-button class="mt-auto" href="#" variant="primary"></b-button>
</b-row>

---

<section>
  <b-card no-body class="overflow-hidden" style="max-width: 540px;">
     <b-row no-gutters>
        <b-col md="6">
           <b-card-img src="https://picsum.photos/400/400" class="rounded-0"></b-card-img>
        </b-col>
        <b-col md="6">
          <b-card-body class="d-flex flex-column">
            <h2>Course Check List</h2>
            <b-card-text>
              Here is the description of the course
            </b-card-text>

            <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
         </b-card-body>

        </b-col>
     </b-row>
   </b-card>
</section>

Answer 1

@G-Cyrillus answer does work, but with a little finesse.

However, he mentioned in a comment that the card-body was not taking up the entire space of the column. So adding height of 100% fixed the issue and is a bit more elegant.

<b-card-body class="h-100 d-flex flex-column">
  <h2>Course Check List</h2>
    <b-card-text>
       Here is the description of the course
    </b-card-text>
  <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
</b-card-body>

Answer 2

the col element must be turned into a flex box too, so the child will stretch to its entire height so the flex-child box, stretching as a flex child does, will behave as expected:

Démo below

;)

window.onload = () => {
  new Vue({ el: '#app' })
}

body { padding: 1rem; }

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<div id="app">
  <section>
    <b-card no-body class="overflow-hidden" style="max-width: 540px;">
       <b-row no-gutters>
          <b-col md="6">
             <b-card-img src="https://picsum.photos/400/400" class="rounded-0"></b-card-img>
          </b-col>
          <b-col class="row" md="6">
            <b-card-body class="d-flex flex-column">
              <h2>Course Check List</h2>
              <b-card-text>
                Here is the description of the course
              </b-card-text>

              <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
           </b-card-body>

          </b-col>
       </b-row>
     </b-card>
  </section>
</div>

in bootstrap-vue, it would be :

<section>
  <b-card no-body class="overflow-hidden" style="max-width: 540px;">
     <b-row no-gutters>
        <b-col md="6">
           <b-card-img src="https://picsum.photos/400/400" class="rounded-0"></b-card-img>
        </b-col>
        <b-col class="row" md="6">
          <b-card-body class="d-flex flex-column">
            <h2>Course Check List</h2>
            <b-card-text>
              Here is the description of the course
            </b-card-text>

            <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
         </b-card-body>

        </b-col>
     </b-row>
   </b-card>
</section>

and to answer the button question , i do work every day even that most of us are to stay home, i'm one of those needed to care about who cannot for themselves ... please, stay home, don't put your beloved ones at risk