html - How do I keep text and an iframe on the same line when resizing in bootstrap 3? -

html - How do I keep text and an iframe on the same line when resizing in bootstrap 3? -

i stuck here. seek cut down size of page, iframe goes on next line. text next iframe doesn't wrap around image. not want iframe move below paragraph when resizing. using bootstrap 3. here code. can see doing wrong? new coding please allow me know need do. thanks.

class="snippet-code-css lang-css prettyprint-override">.video-feature p { text-align: justify; } .video { position: relative; padding-bottom: 56.25%; } .video iframe { position: absolute; width: 100%; height: 100%; max-width: 374px; max-height: 210px; } class="snippet-code-html lang-html prettyprint-override"> <div class="video-feature"> <div class="container"> <div class="row"> <div class="col-md-7"> <h2>ji-sung park becomes ambassador</h2> <p>massa ipsum feugiat massa semper bibendum sagittis convallis porttitor donec mi lorem. nulla morbi hymenaeos habitant, maecenas hymenaeos luctus ullamcorper ligula arcu congue curabitur malesuada fusce justo facilisi. odio european union facilisi magnis porta condimentum. integer facilisi odio. vivamus dui pretium fringilla tempus vulputate odio.mattis ut lorem viverra magnis auctor praesent elit sociis habitasse placerat tempus dapibus. nunc, varius adipiscing est donec neque est sed fusce luctus primis</p> </div> <div class="col-md-5"> <br> <div class="video"> <iframe src="http://www.youtube.com/embed/3q9qf7xzw4y" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> </div>

just add together col-sm-7 , col-sm-5 divs, respectively, takes care of keeping same layout on smaller (hence sm) screens.

so new code this:

<div class="video-feature"> <div class="container"> <div class="row"> <div class="col-md-7 col-sm-7"> <h2>ji-sung park becomes ambassador</h2> <p>massa ipsum feugiat massa semper bibendum sagittis convallis porttitor donec mi lorem. nulla morbi hymenaeos habitant, maecenas hymenaeos luctus ullamcorper ligula arcu congue curabitur malesuada fusce justo facilisi. odio european union facilisi magnis porta condimentum. integer facilisi odio. vivamus dui pretium fringilla tempus vulputate odio.mattis ut lorem viverra magnis auctor praesent elit sociis habitasse placerat tempus dapibus. nunc, varius adipiscing est donec neque est sed fusce luctus primis</p> </div> <div class="col-md-5 col-sm-5"> <br> <div class="video"> video </div> </div> </div> </div> </div>

here demo can play with: http://www.bootply.com/paozjkc8yn (note that, demonstration purposes, removed iframe bootply doesn't allow display reason, replaced word video).

here link bootstrap documentation explaining grid system.

html iframe twitter-bootstrap-3