Menu
I have the following layout on a page:
On the left I have the desktop (lg) version, And on the right the reordering that I want to have on the 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 get a Problem with the desktop view:
see printscreen:
Any proposals to fix that problem and to show the description element (3) direct under element "2" are welcome.
Thanks a lot.
826
By default, this will display the main content first. So in mobile, the main content will be displayed first. Try using col-lg-push and col-lg-pull to reorder the columns in large screens and display the sidebar on the left and main content on the right.
Bootstrap Grid - Small Devices Tip: Small devices are defined as having a screen width from 768 pixels to 991 pixels. For small devices we will use the . col-sm-* classes. Now Bootstrap is going to say "at the small size, look for classes with -sm- in them and use those".
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
col-sm-4 are available for quickly making grid layouts. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With