Хорошо, так что это довольно простое использование flexbox.
Кодовый код здесь
<div class="container">
<div class="row flex">
<div class="col-md-8 center-vertical">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet lectus proin nibh nisl condimentum id venenatis a. Aliquam sem fringilla ut morbi tincidunt augue. Ultrices dui sapien eget mi proin sed libero enim. Erat nam at lectus urna duis. Viverra mauris in aliquam sem fringilla ut morbi. Ornare massa eget egestas purus viverra. Id consectetur purus ut faucibus. Malesuada fames ac turpis egestas maecenas pharetra. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Felis imperdiet proin fermentum leo vel orci. Lobortis mattis aliquam faucibus purus. Sed viverra tellus in hac habitasse platea dictumst.</p>
<p>Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Nam at lectus urna duis convallis convallis tellus. Tortor condimentum lacinia quis vel eros donec ac odio. Interdum varius sit amet mattis vulputate enim. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Egestas integer eget aliquet nibh. Natoque penatibus et magnis dis. Ut pharetra sit amet aliquam. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Massa tincidunt nunc pulvinar sapien. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Massa tempor nec feugiat nisl pretium fusce id.</p>
<p>Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Facilisis mauris sit amet massa. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Sed velit dignissim sodales ut. Facilisi morbi tempus iaculis urna id volutpat lacus. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Odio aenean sed adipiscing diam donec. Hac habitasse platea dictumst quisque. Magna ac placerat vestibulum lectus. Lobortis feugiat vivamus at augue eget arcu dictum. Mi tempus imperdiet nulla malesuada pellentesque. Aliquet nibh praesent tristique magna sit amet purus. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Justo nec ultrices dui sapien eget mi.</p>
</div>
<div class="col-md-4 center-vertical">
<img class="" src="https://placehold.it/250" />
</div>
</div>
</div>
CSS:
.flex {display: flex;}
.center-vertical {align-self: center;}
Iпонял, что ваш код может не работать с вышеуказанным. Итак, вот еще одна идея, и я не уверен, что вы можете приблизиться к этому Codepen .
<div class="container">
<div class="row">
<div class="col-sm-12 wrapper">
<div class="main">
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
</p>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
</p>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
</p>
</div>
<img src="https://placehold.it/200" width="200" height="200" />
</div>
</div>
</div>
CSS:
.wrapper {
display: flex;
flex-flow: row wrap;
text-align: center;
}
.main {text-align: left;}
.main { flex: 3; }
img { order: 99;align-self:center; }
Надеюсь, один из примеров может бытьмодифицировано под ваши потребности.