[英]Twitter bootstrap reorder elements on small devices
我在页面上有以下布局:
左侧是台式机(lg)版本,右侧是我希望在小型设备上进行的重新排序。
使用此代码:
<div class="row"> <div class="col-sm-6 col-sm-push-6"> <div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1> <br> Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div> </div> <div class="col-sm-6 col-sm-pull-6"> <div class="alert alert-info">Image (1) <p></p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p> <p></p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p> </div> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-6 col-sm-6 col-sm-offset-6 col-lg-offset-6"> <div class="alert alert-info">Description (3)</div> </div> </div>
欢迎提出任何解决该问题并在元素“ 2”下直接显示描述元素(3)的建议。
非常感谢。
请尝试以下操作:
<div class="row">
<div class="col-sm-12 col-lg-6 pull-right">
<div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1>
<br>
Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div>
</div>
<div class="col-sm-12 col-lg-6 pull-left">
<div class="alert alert-info">Image (1)
<p></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>
<p></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>
</div>
</div>
<div class="col-sm-12 col-lg-6 pull-right">
<div class="alert alert-info">Description (3)</div>
</div>
</div>
尝试在您的div中添加col-xs-12
。 您的div将在小型设备上占用所有宽度:
<div class="row">
<div class="col-sm-6 col-sm-push-6 col-xs-12">
<div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1>
<br>
Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div>
</div>
<div class="col-sm-6 col-sm-pull-6 col-xs-12">
<div class="alert alert-info">Image (1)
<p></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>
<p></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-6 col-sm-6 col-sm-offset-6 col-lg-offset-6 col-xs-12">
<div class="alert alert-info">Description (3)</div>
</div>
</div>
这是Flexbox和JQuery Fiddle
一种解决方案
$(window).on("resize", function () { if($(window).width() < 768) { $('.right').replaceWith(function() { return $('.box', this); }); } else { if($('.right').length === 0){ $('.box-2, .box-3').wrapAll('<div class="right">'); } } }).resize();
.content { height: 100vh; display: flex; } .box { flex: 1; background: #36434B; margin: 10px; color: white; font-size: 50px; display: flex; align-items: center; justify-content: center; } .right { flex-direction: column; display: flex; flex: 1; } .right .box:last-child { flex: 2; } @media(max-width: 768px) { .content { flex-direction: column; } .box-1 { order: 2; flex: 3; } .box-2 { order: 1; flex: 1; } .box-3 { order: 3; flex: 2; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="box box-1">1</div> <div class="right"> <div class="box box-2">2</div> <div class="box box-3">3</div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.