Bootstrap响应时将div水平对齐到垂直

Question

HTML:

 .wrap { display: flex; background: white; padding: 1rem 1rem 1rem 1rem; border-radius: 0.5rem; box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1); margin-bottom: 2rem; } .vcenter { margin: auto; margin-left: 10px; } .mbr-section-title3 { text-align: left; } .display-5 { font-family: 'Gotham-Book-Regular'; font-size: 1.4rem; } .mbr-bold { font-weight: 700; } .display-6 { font-family: 'Gotham-Book-Regular'; font-size: 1.4rem; } .fit100 { width: 100px; height: 100px; } .img-circle { border-radius: 50%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-6"> <div class="wrap"> <div> <img src="https://www.drupal.org/files/issues/default-avatar.png" class="img-circle fit100" alt="" title=""> </div> <div class="text-wrap vcenter"> <p class="mbr-fonts-style text1 mbr-text display-6">On Bawabba, you will find various types of services all under one roof. You can compare different profiles and contact the one that best suits your requirement directly wdslfjlksjdfk sdjfkljfsdkf sdk.</p> <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">John que</h2> <p class="nopadd">Designer - google.com</p> </div> </div> </div> </div> 

In side the class="wrap" I have to div , one for image and the other one is for text content. On normal browser view the the image and content are like from left to right. And that is fine and perfect.

Now what I wish to have is on mobile view(responsive) the image div has to be on top and content div has to below the image.

Some thing like this:

Answer 1

You do this using media query.

 .wrap { display: flex; background: white; padding: 1rem 1rem 1rem 1rem; border-radius: 0.5rem; box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1); margin-bottom: 2rem; } .vcenter { margin: auto; margin-left: 10px; } .mbr-section-title3 { text-align: left; } .display-5 { font-family: 'Gotham-Book-Regular'; font-size: 1.4rem; } .mbr-bold { font-weight: 700; } .display-6 { font-family: 'Gotham-Book-Regular'; font-size: 1.4rem; } .fit100 { width: 100px; height: 100px; } .img-circle { border-radius: 50%; } @media screen and (max-width:767px){ .wrap { flex-wrap: wrap; text-align: center; } .img-wrap{ width:100%; } .img-wrap img { display: inline-block; } .mbr-section-title3 { text-align: center; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-6"> <div class="wrap"> <div class="img-wrap"> <img src="https://www.drupal.org/files/issues/default-avatar.png" class="img-circle fit100" alt="" title=""> </div> <div class="text-wrap vcenter"> <p class="mbr-fonts-style text1 mbr-text display-6">On Bawabba, you will find various types of services all under one roof. You can compare different profiles and contact the one that best suits your requirement directly wdslfjlksjdfk sdjfkljfsdkf sdk.</p> <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">John que</h2> <p class="nopadd">Designer - google.com</p> </div> </div> </div> </div>