Bootstrap half screen

Hey all,

How does the code look like in Bootstrap to see half of the screen filled with an image and next to it the other half with text, and then the opposite, so that the images are same size and fit perfectly?
Please see attachement to understand what I mean.
On mobile, the text should appear full screen below the full screen image.

This is the solution I received:

Code:

---

<div class="row">
<div class="col-md-6 col-xs-12">text</div>
<div class="col-md-6 col-xs-12">image</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12">image</div>
<div class="col-md-6 col-xs-12">text</div>
</div>

---