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> 

在class="wrap"旁邊，我必須div ，一個用於圖像，另一個用於文本內容。 在普通瀏覽器上，圖像和內容從左到右都是相似的。 那是完美的。

現在，我希望在移動視圖（響應）上，圖像div必須位於頂部，而內容div必須位於圖像下方。

像這樣的東西：

Answer 1

您可以使用媒體查詢來執行此操作。

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