There are bootstrap mesh. I want to make it so that on large screens a block with a picture is located on the right, and the text is on the left, and on small resolutions - the picture goes up, and the text slides down. I know that this can be achieved using the push-pull classes, but for some reason in my case the blocks are not arranged as it should be ..

link to fidl

 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } .image { position: relative; } .summary { position: static; } 
 <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12 col-md-push-6 image"> <img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" /> </div> <div class="col-md-6 col-sm-12 col-md-pull-6 summary"> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> </div> </div> </div>

    1 answer 1

    One of the easiest options.

     .image, .summary { display:inline-block; vertical-align:top; } .image { float: right; width: auto; } .summary { width: 80%; } @media (max-width: 400px) { .image { float:left; } }

    https://jsfiddle.net/DTcHh/12601/

     /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } .image, .summary { display: inline-block; vertical-align: top; } .image { float: right; width: auto; } .summary { width: 80%; } @media (max-width: 400px) { .image { float: left; } } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12 col-md-push-6 image"> <img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" /> </div> <div class="col-md-6 col-sm-12 col-md-pull-6 summary"> <p>this is sparta jigjifdgifdo gig dfi gj dog gidsof gidfjs igdfj ijfds isd io jidfjsg if diosgj idsfo gofidsj gifsoj oidsjg ifdsoj giosdf gidjs ijfdsi fidsgj idofsjg</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> <p>this is sparta</p> </div> </div> </div>

    • in fact, something completely incomprehensible happened to you - for some reason a white void was formed at the left above, and at large resolutions the picture generally runs somewhere far, far away to the right. The right decision is to bypass the static positioning and the issue is resolved - Vasya