Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Twitter bootstrap reorder elements on small devices

Tags:

javascript

css

twitter-bootstrap

I have the following layout on a page: enter image description here
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: enter image description here

Any proposals to fix that problem and to show the description element (3) direct under element "2" are welcome.

Thanks a lot.

like image 826
Ahmed Ala Dali Avatar asked Feb 15 '16 15:02

Ahmed Ala Dali

People also ask

How do I change Bootstrap 3 column order on mobile layout?

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.

How we define grid for extra small devices in Bootstrap?

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

What is XS SM MD lg in Bootstrap?

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.

What is Col SM 4 in Bootstrap?

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 .

1 Answers

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>
like image 188
Ricky Barnett Avatar answered Dec 03 '22 01:12

Ricky Barnett
Sign in to Comment

Related questions

Different window.open(...) behaviour when running Internet Explorer 11 as Administrator
Create a view that grows with content and when it hits the screen height begins scrolling with react native?
Directive/scope inheritance
How to query relational data in Parse JavaScript
React-Redux error Invalid prop `children` of type `object` supplied to `Provider`
Can I install Angular Material library without Bower or NPM?
File format of the VTK file to be used as input for XTK
React: AppStore listener must be a function
Move google maps logo above custom interface on bottom. JavaScript
Paypal integration to Flask application
Getting rid of aliasing on a SVG circular element
When multiple users are viewing a record and 1 person updates the record, how to notify other the record is updated?
calling javaScript from java method
How to load pages with JavaScript rather than redirect?
How to use two ng-repeat inside a particular tag
Use Dropbox Chooser from inside Electron app
Disable Predictive Scrolling - Mousewheel (OnScroll) Event fires too often (Touchpad)
Mock Timezone in PhantomJS for Jasmine Test
How to parse a dirty CSV with Node.js?
Pop up widget through script

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!