width="650" height="750" style="width: 550px; height: 620px; display: inline;" idm_frm="456"></iframe>
</div>
<div class="col-md-6 col-lg-6 col-xs-6">
<p style="text-align:justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam nulla porttitor massa id neque aliquam. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Dolor magna eget est lorem ipsum dolor. Neque aliquam vestibulum morbi blandit cursus risus at. A scelerisque purus semper eget duis at tellus at urna. Eu nisl nunc mi ipsum faucibus. Felis imperdiet proin fermentum leo vel. Ipsum dolor sit amet consectetur adipiscing elit. Gravida neque convallis a cras semper.
</p>
</div>
</div>
You're telling your divs to occupy half the space at mobile breakpoint as well. Just remove the two col-xs-6 classes from the divs. Plus you can also remove the col-lg-6 classes as the large screen breakpoint will carry the medium screen breakpoint classes. Your code should then look like: <div class="row"> <div class="col-md-6"> <iframe ...>...</iframe> </div> <div class="col-md-6"> <p style="text-align:justify"> Lorem ipsum ... </p> </div> </div>
Обсуждают сегодня