Twitter bootstrap reordering elements on small devices

Question

I have the following layout on the page:

On the left, I have the desktop version (lg), and on the right, the reordering that I want on small devices.

With this code:

<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> 

I have a problem with the presentation on the desktop: see print screen:

Any suggestions on how to fix this problem and welcome the description element (3) under element "2" are welcome.

Many thanks.

Answer 1

Try the following:

 <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> 

Answer 2

Try adding col-xs-12 to your divs. Your div will be full width on small devices:

 <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> 

Answer 3

This is one solution with Flexbox and 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>