How to put a photo and a demon with bootstrap so that the photo on the left has no margin and is completely on the left side of the screen

Hello  First of all, I apologize for my language  How to put a photo and a demon with Bootstrap so that the photo on the left has no margin and is completely on the left side of the screen   And the next question  Is it possible that they are not together before the tablet mode, ie the photo is at the bottom and the demon is at the top of the photo?

<section class="text-end d-flex align-items-center d-block">
    <div class="w-50 container-fluid">
        <div class="container-fluid text-end">
            <div class="row">
                <div class="col-md-4">
                    <h1>Heading</h1>
                    <p>Paragraph</p><button class="btn btn-primary" type="button">Button</button>
                </div>
            </div>
        </div>
    </div>
    <div class="d-block d">
        <picture><img class="img-fluid" src="sincerely-media-_-hjiem-1.png" style="width: 553.922px;height: 593.953px;margin-left: 0px;margin-right: 0px;" width="60%" /></picture>
    </div>
</section>