过渡到移动视图后如何在引导栏上将图像缩放为全宽

Question

I'm struggling with making the image on the right stretch to full width in a moment when you'll make the screen size smaller so it transitions to mobile view. Is there any other class in bootstrap that would do similar work that "img-fluid" does but display image full width when it goes below the text in bootstrap grid system?

<div class="row">
<div class="col-md-6 d-flex">
<div class="align-self-center">
<p class="lead font-weight-bold">sometext</p>
</div>
</div>
<div class="col-sm-6">
  <img class="img-fluid" src="someimage.jpg">
</div>
</div>

Here is my fiddle: http://jsfiddle.net/x1hphsvb/2220/ To see what I mean simply lower the width of display window. Image goes below the text and fills only half of the div when I want it to fill it fully and behave as it does right now before the transition.

Answer 1

Both the columns should have the same breakpoint (ie; md / sm ) so that they become full-width at the same time...

   <div class="row">
     <div class="col-md-6 d-flex">
      <div class="align-self-center">
       <p class="lead font-weight-bold">sometext</p>
      </div>
     </div>
     <div class="col-md-6">
      <img class="img-fluid" src="someimage.jpg">
     </div>
   </div>

http://jsfiddle.net/dwnu5zjq/