我想要显示12个媒体项目。
在中画面和网格上方，我想显示3列和4行。 在一个小屏幕上，我想显示2列和6行。 在一个超小屏幕上，我想显示1列和12行。
我不确定如何构建我的col- *并列出项目以实现此目的。
有人可以帮忙把我的物品整理好。
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-chart_pie.png" alt="Google Analytics">
<div class="media-body">
<h6>Google Analytics</h6>
<p>Automatic Google Analytics link tagging to easily track your sales and conversions.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-mouse.png" alt="Link Clicks">
<div class="media-body">
<h6>Link Clicks</h6>
<p>Learn what subscribers are interested in by which links were popular, who clicked.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-flag_red.png" alt="Spam Complaints">
<div class="media-body">
<h6>Spam Complaints</h6>
<p>Integration with Yahoo!, Hotmail and more mean we can report on complaints.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-table.png" alt="Export to Excel">
<div class="media-body">
<h6>Export to Excel</h6>
<p>Export all reporting data to Excel for offline storage or further analysis.</p>
</div>
</li>
</ul>
</div> <!-- /col -->
<div class="col-sm-4">
<ul class="list-unstyled">
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-arrow_right_curved.png" alt="Forward to a friend">
<div class="media-body">
<h6>Forward to a friend</h6>
<p>Track viral activity by seeing exactly which subscribers forward on to a friend.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-person_cross.png" alt="Bounces">
<div class="media-body">
<h6><a href="report-bounces.php">Bounces</a></h6>
<p>See who bounced and why, and we'll figure out if we should try again or remove.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-gear.png" alt="API">
<div class="media-body">
<h6>Access with our API</h6>
<p>Sync and display campaign reports in your own apps using our own API.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-clock.png" alt="Activity Timeline">
<div class="media-body">
<h6>Activity Timeline</h6>
<p>See your complete history with every subscriber in a handy timeline.</p>
</div>
</li>
</ul>
</div> <!-- /col -->
<div class="col-sm-4">
<ul class="list-unstyled">
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-chart_bar.png" alt="Compare Campaigns">
<div class="media-body">
<h6>Compare Campaigns</h6>
<p>Spot trends by comparing opens, clicks and more for multiple campaigns at once.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-orb_cross.png" alt="Unsubscribes">
<div class="media-body">
<h6><a href="report-bounces.php">Unsubscribes</a></h6>
<p>We make sure you don't accidentally try and send to them again in the future.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-people.png" alt="Client Report Access">
<div class="media-body">
<h6>Client Report Access</h6>
<p>Let your clients access the reports on any campaigns you send for them.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-flag_green.png" alt="delivery">
<div class="media-body">
<h6>Top-notch delivery</h6>
<p>Authentication, relationships with ISPs and more ensure your emails are delivered.</p>
</div>
</li>
</ul>
</div> <!-- /col -->
</div> <!-- /row -->
答案 0 :(得分：1)
您似乎正在使用基于mr-3和d-flex类的bootstrap v4。
您可以将col-sm-4替换为col-12 col-sm-6 col-md-4
示例代码。这将在超小屏幕上显示1列，在小屏幕上显示2列，在中型和大屏幕上显示3个列。
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
<ul class="list-unstyled">
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-chart_pie.png" alt="Google Analytics">
<div class="media-body">
<h6>Google Analytics</h6>
<p>Automatic Google Analytics link tagging to easily track your sales and conversions.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-mouse.png" alt="Link Clicks">
<div class="media-body">
<h6>Link Clicks</h6>
<p>Learn what subscribers are interested in by which links were popular, who clicked.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-flag_red.png" alt="Spam Complaints">
<div class="media-body">
<h6>Spam Complaints</h6>
<p>Integration with Yahoo!, Hotmail and more mean we can report on complaints.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-table.png" alt="Export to Excel">
<div class="media-body">
<h6>Export to Excel</h6>
<p>Export all reporting data to Excel for offline storage or further analysis.</p>
</div>
</li>
</ul>
</div> <!-- /col -->
<div class="col-12 col-sm-6 col-md-4">
<ul class="list-unstyled">
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-arrow_right_curved.png" alt="Forward to a friend">
<div class="media-body">
<h6>Forward to a friend</h6>
<p>Track viral activity by seeing exactly which subscribers forward on to a friend.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-person_cross.png" alt="Bounces">
<div class="media-body">
<h6><a href="report-bounces.php">Bounces</a></h6>
<p>See who bounced and why, and we'll figure out if we should try again or remove.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-gear.png" alt="API">
<div class="media-body">
<h6>Access with our API</h6>
<p>Sync and display campaign reports in your own apps using our own API.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-clock.png" alt="Activity Timeline">
<div class="media-body">
<h6>Activity Timeline</h6>
<p>See your complete history with every subscriber in a handy timeline.</p>
</div>
</li>
</ul>
</div> <!-- /col -->
<div class="col-12 col-sm-6 col-md-4">
<ul class="list-unstyled">
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-chart_bar.png" alt="Compare Campaigns">
<div class="media-body">
<h6>Compare Campaigns</h6>
<p>Spot trends by comparing opens, clicks and more for multiple campaigns at once.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-orb_cross.png" alt="Unsubscribes">
<div class="media-body">
<h6><a href="report-bounces.php">Unsubscribes</a></h6>
<p>We make sure you don't accidentally try and send to them again in the future.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-people.png" alt="Client Report Access">
<div class="media-body">
<h6>Client Report Access</h6>
<p>Let your clients access the reports on any campaigns you send for them.</p>
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="images/icons/icon-48x48-flag_green.png" alt="delivery">
<div class="media-body">
<h6>Top-notch delivery</h6>
<p>Authentication, relationships with ISPs and more ensure your emails are delivered.</p>
</div>
</li>
</ul>
</div> <!-- /col -->
</div> <!-- /row -->