在此示例中，我希望我的圖像列堆疊在移動視圖中的文本信息列下方。我將如何實現這一目標？我嘗試使用 Flexbox，但沒有運氣，如果有人能向我解釋這一點，我將不勝感激。謝謝<div class="container"> <div class="row"> <div class="col-lg-4 col-md-12"> <img src="img/buy1.png" class="img-fluid phone1" width="300" height="auto" alt="buy icon"> </div> <div class="col-lg-8 col-md-12"> <div class="info-container"> <div class="purchase-icon-left"> <img src="img/buy-icon.png" class="purchase-icon" alt="buy icon"> </div> <div class="text-test2"> <h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2> <ul> <li>Discover your desired items by browsing through eight different categories.</li> <li>Browse through thousands of items sold by other users. </li> <li>Don't agree with the price? Message the seller and request a price deduction. </li> </ul> </div> </div> </div></div>
2 回答
Cats萌萌
TA貢獻1805條經驗 獲得超9個贊
使用 display:flex 和 order。更改訂單數量以更改屏幕上的位置。此外，您需要針對較小屏幕進行媒體查詢。為了查看所有效果，請在整個頁面上檢查它并拖動屏幕。
@media screen and (max-width: 750px) {
.row{
display:flex;
flex-direction: column;
flex-flow: row wrap;
}
div.text-test2{
background:red;
order: 1;
}
.col-lg-4{
background:green;
order: 2;
}
.purchase-icon-left{
background:blue;
order: 3;
}
}
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<img src="http://tineye.com/images/widgets/mona.jpg" class="img-fluid phone1" width="300" height="auto" alt="buy icon">
</div>
<div class="col-lg-8 col-md-12">
<div class="info-container">
<div class="purchase-icon-left">
<img src="http://tineye.com/images/widgets/mona.jpg" class="purchase-icon" alt="buy icon">
</div>
<div class="text-test2">
<h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2>
<ul>
<li>Discover your desired items by browsing through eight different categories.</li>
<li>Browse through thousands of items sold by other users. </li>
<li>Don't agree with the price? Message the seller and request a price deduction. </li>
</ul>
</div>
</div>
</div>
</div>
慕運維8079593
TA貢獻1876條經驗 獲得超5個贊
看看下面的代碼。
起初，圖像位于文本上方，但一旦寬度低于 400px，它就會跳到文本下方。為此，它使用兩個類.computer-only和.mobile-only，這兩個類是通過查詢在 CSS 中定義的@media。
.mobile-only {
display: none;
}
@media (max-width: 400px) {
.mobile-only {
display: block;
}
.computer-only {
display: none;
}
}
<img class="computer-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">
Welcome to stackoverflow!
<img class="mobile-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">
要將其應用于您的示例，請忽略 HTML 代碼，但將 CSS 添加到您的樣式中。然后，您可以將這兩個類添加到您需要的任何元素中。
另外，將 更改400px為您定義的移動設備和計算機之間的邊界！
- 2 回答
- 0 關注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消