jquery - How can I do prevent downward shift of current content when the browser screen resize at responsive layout? -

jquery - How can I do prevent downward shift of current content when the browser screen resize at responsive layout? -

html

<div class="container"> <div class="row"> <div class="col-md-8 col-sm-8 col-xs-8"> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled create type specimen book. has survived not 5 centuries, jump electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.it popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. </div> <div class="col-md-4 col-sm-4 col-xs-4"> <img src="http://www.placehold.it/300x300" width="300" height="300" alt="" class="img-responsive"> </div> </div> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-4"> <img src="http://placehold.it/300x300/c80000/ffffff" width="300" height="300" alt="" class="img-responsive"> </div> <div class="col-md-8 col-sm-8 col-xs-8"> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled create type specimen book. has survived not 5 centuries, jump electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.it popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. </div> </div> <div class="row"> <div class="col-md-8 col-sm-8 col-xs-8"> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled create type specimen book. has survived not 5 centuries, jump electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.it popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. </div> <div class="col-md-4 col-sm-4 col-xs-4"> <img src="http://www.placehold.it/300x300" width="300" height="300" alt="" class="img-responsive"> </div> </div> </div>

css

.container .row { margin-bottom: 30px; }

i utilize bootstrap 3 site , responsive layout below. want maintain position of current content in viewport when browser screen resize,it not shift out of viewport.

current view;

when browser screen resize;

i want stays in same position this;

code example

how can this?

to maintain things proportional, utilize max height and/or width container div. setting dimensions parent container help lot resizing issues.

move html image tags before text...

can post css .img-responsive?

jquery html css twitter-bootstrap responsive-design