在移动设备上使用引导4排序列
在移动设备上使用引导4排序列
提问于 2021-08-27 04:18:40
这些排序类不起作用。我想要的是移动和平板电脑上的订单：
第一部分：
- text
- img
第二部分：
- text
- img
如果我现在在手机上看到这张照片，2张图片在对方下面，那就不好了。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title"><a href="#" title="Tovább a termékekre">Beton tetőcserép</a></h2>
</div>
<div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 order-sm-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-12 col-md-6 order-sm-1 order-md-2">
<h2 class="fooldal_title"><a href="#" title="Tovább a termékekre">Kerámia tetőcserép</a></h2>
</div>
</div>
</div>
</section>
回答 2
Stack Overflow用户
发布于 2021-08-27 04:28:35
如果您希望图像出现在文本旁边的小( sm )和中等(md)，更改您的代码，并仅使用sm。它将申请sm和md。请记住，您有12科尔，所以如果您使用sm- 12，那么您是填补12科尔。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title"><a href="#" title="Tovább a termékekre">Beton tetőcserép</a></h2>
</div>
<div class="col-sm-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-4 order-sm-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-6 order-sm-1 order-md-2">
<h2 class="fooldal_title"><a href="#" title="Tovább a termékekre">Kerámia tetőcserép</a></h2>
</div>
</div>
</div>
</section>
Stack Overflow用户
发布于 2021-08-27 04:30:07
你需要使用“订单-N”类的手机和“订单-md-N”的分辨率768px+。
所以：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="my-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title"><a href="#" title="Tovább a termékekre">Beton tetőcserép</a></h2>
</div>
<div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="my-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 order-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-12 col-md-6 order-1 order-md-2">
<h2 class="fooldal_title"><a href="#" title="Tovább a termékekre">Kerámia tetőcserép</a></h2>
</div>
</div>
</div>
</section>此外，您也可以使用类"my-5“而不是”mt-5mb-5“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68953318
复制相关文章
相似问题
腾讯云开发者
