title: Bootstrap/flexbox card: move image to left/right side on desktop
body: <p>I'm trying to build following card layout using Bootstrap 4 with flexbox enabled. Picture is taken from my current implementation and it works like expected.</p>
  
  <p><a href="https://i.stack.imgur.com/huXvo.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/huXvo.jpg" alt="Current mobile layout"></a></p>
  
  <p>HTML structure is following:</p>
  
  <pre><code>&lt;section&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-block"&gt;
              &lt;h4 class="card-title"&gt;Curabitur gravida vestibulum imperdiet.&lt;/h4&gt;
              &lt;p class="card-text"&gt;Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.&lt;/p&gt;
              &lt;p class="card-text"&gt;Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.&lt;/p&gt;
              &lt;a href="#" class="btn btn-primary"&gt;Read More&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6"&gt;
          &lt;img class="card-img-bottom" src="img1.jpg" alt="" title=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Now when I scale to larger screen, I got following output (which is expected with Bootstrap but not wanted one):</p>
  
  <p><a href="https://i.stack.imgur.com/GGfLx.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/GGfLx.jpg" alt="enter image description here"></a></p>
  
  <p>What I would like to see instead is:</p>
  
  <p><a href="https://i.stack.imgur.com/75aE7.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/75aE7.jpg" alt="enter image description here"></a></p>
  
  <p>So my question is, how I can properly implement this kind of layout? I'm using flex-box, so Bootstrap columns (col-*) are always same height which is exactly what I want. But I should remove the paddings between two columns, then make both columns content always to cover 100% of parent height, and finally make sure that picture maintains it's aspect ratio, so it should be cropped from the center like I have in example.</p>
  
  <p>I've Googled and tried many different solutions but all of them seems to be overly complex or "hacky" solutions. So I'm wondering is it true that there is no easy way to implement this kind of layout...?</p>
  
  <p>Note: solution doesn't have to be Bootstrap related, general solution for this kind of problem is even better.</p>