响应式图像和旁边的文字

Question

嘿，我想在左侧制作一些文字，在右侧制作一张图片，它应该是响应性的

我认为它应该看起来像这样

CATEGORY

text text text    mid        |-----|

text text text    mid        |img|

text text text    mid        |-----|

当它缩小到小图片时，我希望它像这样：

CATEGORY

text text text  ......|sameimage|

text text text  ..... |IMAGEimg|

text text text text text text

这是我现在的代码：

<div class="container">
    <div class="row">

        <div class="col-xs-6 col-md-6">

            <a> </a><a> </a>
            <h2>Category Name</h2>
            <br>text test some things just for testing his text is unnecesarry
            <br>This is random text dont worry his text is unnecesarry
            <br>This text is unnecesarry his text is unnecesarry
            <br>It really is unnecesarry just decoration his text is unnecesarry
            <br>for testing purposes of the website's design his text is unnecesarry

            <br>
            <br>
            <a href="templates.php"><h3>More Templates</h3></a>
        </div>

        <div class="col-xs-5 col-md-5">

            <img class="img-responsive" src="test.jpeg" id="image">

        </div>

    </div>
</div>

当我在手机上查看问题时，问题就像

category
text

text  ........ |IMAGE|

text  ..........|--------|

text

text

text