我基本上有一排有 3 組列，我想要以下布局（使用引導程式 5），基本上左邊是影像，右邊是文本。下一列左側有文本，右側有影像，最后有左側影像，右側有文本
Image Text
Text Image
Image Text
我嘗試了類似下面的方法，但它在移動設備上搞砸了。在移動設備上，它應該總是首先是影像，然后是文本。
<div class="col-md-6"><img src="..." /></div>
<div class="col-md-6">Some text</div>
<div class="col-md-6 order-last"><img src="..." /></div>
<div class="col-md-6">Some text</div>
<div class="col-md-6 order-last"><img src="..." /></div>
<div class="col-md-6" class="order-last">Some text</div>
uj5u.com熱心網友回復：
<div>
<div class="main-container d-flex flex-column flex-md-row">
<div class="image-container">
<img src="https://via.placeholder.com/100/" alt="" />
</div>
<div class="text-container">
<p>Some dummy text </p>
</div>
</div>
<div class="main-container d-flex flex-column flex-md-row-reverse">
<div class="image-container">
<img src="https://via.placeholder.com/100/" alt="" />
</div>
<div class="text-container">
<p>Some dummy text </p>
</div>
</div>
<div class="main-container d-flex flex-column flex-md-row">
<div class="image-container">
<img src="https://via.placeholder.com/100/" alt="" />
</div>
<div class="text-container">
<p>Some dummy text </p>
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/445619.html
標籤：推特引导