It is not possible to correctly position blocks in the adaptive grid



  • There's a Butstrep net. I'd like to make sure that on the big screen, the picture is on the right, and the text on the left, and on small permits, the picture goes up and down. I know this can be done by class. push-pullbut somehow, in my case, the blocks are not as close as they should be. ♪

    https://jsfiddle.net/DTcHh/12597/

    @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>



  • One of the simple 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2