Bootstrap 3 Reorder columns for mobile and tablet

I using Bootstrap 3 and im trying to reorder the columns position in mobile and tablet.

How is this possible?

this is my code:

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    </div>

</div>

I want to Bootstrap to show

Text

Image

Text

Image

Right now it shows

Image

Text

Text

Image

Is there a way to handle this?

What it looks like right now

edited Nov 20 at 21:35

dustinos3

4651616

asked Nov 20 at 21:24

max_jenkis

add a comment |

I using Bootstrap 3 and im trying to reorder the columns position in mobile and tablet.

How is this possible?

this is my code:

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    </div>

</div>

I want to Bootstrap to show

Text

Image

Text

Image

Right now it shows

Image

Text

Text

Image

Is there a way to handle this?

What it looks like right now

edited Nov 20 at 21:35

dustinos3

4651616

asked Nov 20 at 21:24

max_jenkis

add a comment |

I using Bootstrap 3 and im trying to reorder the columns position in mobile and tablet.

How is this possible?

this is my code:

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    </div>

</div>

I want to Bootstrap to show

Text

Image

Text

Image

Right now it shows

Image

Text

Text

Image

Is there a way to handle this?

What it looks like right now

edited Nov 20 at 21:35

dustinos3

4651616

asked Nov 20 at 21:24

max_jenkis

I using Bootstrap 3 and im trying to reorder the columns position in mobile and tablet.

How is this possible?

this is my code:

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    </div>

</div>

I want to Bootstrap to show

Text

Image

Text

Image

Right now it shows

Image

Text

Text

Image

Is there a way to handle this?

What it looks like right now

css twitter-bootstrap-3

edited Nov 20 at 21:35

dustinos3

4651616

asked Nov 20 at 21:24

max_jenkis

edited Nov 20 at 21:35

dustinos3

4651616

asked Nov 20 at 21:24

max_jenkis

edited Nov 20 at 21:35

dustinos3

4651616

edited Nov 20 at 21:35

dustinos3

4651616

edited Nov 20 at 21:35

dustinos3

4651616

asked Nov 20 at 21:24

max_jenkis

asked Nov 20 at 21:24

max_jenkis

asked Nov 20 at 21:24

max_jenkis

add a comment |

2 Answers
2

active

oldest

votes

Can use flex in the mobile version.

 .main-row {

            display: flex;

            flex-flow: column;

        }



            .main-row .col-md-6 {

                display: flex;

                order: 1;

            }



            .main-row .col-md-6 +.col-md-6 {

                display: flex;

                order: 0;

            }

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    IMGES

    </div>

</div>

edited Nov 20 at 21:49

answered Nov 20 at 21:43

blakcat

9617

Thank you so much!!
– max_jenkis
Nov 20 at 22:43

add a comment |

Unfortunately in Bootstrap 3 you cannot change the order of columns in smaller screens but you can do that in large screens. In Bootstrap 4 you can now change the order of columns in smaller screens. Below you can see one way of doing this.

<div class="row flex-column-reverse flex-md-row">

    <div class="col-md-3">

        sidebar

    </div>

    <div class="col-md-9">

        main

    </div>

</div>

answered Nov 20 at 21:45

Warsame Ali

Thank you! This works om Bootstrap 4!
– max_jenkis
Nov 20 at 21:49

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401763%2fbootstrap-3-reorder-columns-for-mobile-and-tablet%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Can use flex in the mobile version.

 .main-row {

            display: flex;

            flex-flow: column;

        }



            .main-row .col-md-6 {

                display: flex;

                order: 1;

            }



            .main-row .col-md-6 +.col-md-6 {

                display: flex;

                order: 0;

            }

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    IMGES

    </div>

</div>

edited Nov 20 at 21:49

answered Nov 20 at 21:43

blakcat

9617

Thank you so much!!
– max_jenkis
Nov 20 at 22:43

add a comment |

Can use flex in the mobile version.

 .main-row {

            display: flex;

            flex-flow: column;

        }



            .main-row .col-md-6 {

                display: flex;

                order: 1;

            }



            .main-row .col-md-6 +.col-md-6 {

                display: flex;

                order: 0;

            }

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    IMGES

    </div>

</div>

edited Nov 20 at 21:49

answered Nov 20 at 21:43

blakcat

9617

Thank you so much!!
– max_jenkis
Nov 20 at 22:43

add a comment |

Can use flex in the mobile version.

 .main-row {

            display: flex;

            flex-flow: column;

        }



            .main-row .col-md-6 {

                display: flex;

                order: 1;

            }



            .main-row .col-md-6 +.col-md-6 {

                display: flex;

                order: 0;

            }

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    IMGES

    </div>

</div>

edited Nov 20 at 21:49

answered Nov 20 at 21:43

blakcat

9617

Can use flex in the mobile version.

 .main-row {

            display: flex;

            flex-flow: column;

        }



            .main-row .col-md-6 {

                display: flex;

                order: 1;

            }



            .main-row .col-md-6 +.col-md-6 {

                display: flex;

                order: 0;

            }

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    IMGES

    </div>

</div>

 .main-row {

            display: flex;

            flex-flow: column;

        }



            .main-row .col-md-6 {

                display: flex;

                order: 1;

            }



            .main-row .col-md-6 +.col-md-6 {

                display: flex;

                order: 0;

            }

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    IMGES

    </div>

</div>

 .main-row {

            display: flex;

            flex-flow: column;

        }



            .main-row .col-md-6 {

                display: flex;

                order: 1;

            }



            .main-row .col-md-6 +.col-md-6 {

                display: flex;

                order: 0;

            }

<div class="row main-row">

    <div class="col-md-6">

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.

    </div>

    <div class="col-md-6">

    IMGES

    </div>

</div>

edited Nov 20 at 21:49

answered Nov 20 at 21:43

blakcat

9617

edited Nov 20 at 21:49

answered Nov 20 at 21:43

blakcat

9617

answered Nov 20 at 21:43

blakcat

9617

answered Nov 20 at 21:43

blakcat

9617

Thank you so much!!
– max_jenkis
Nov 20 at 22:43

add a comment |

Thank you so much!!
– max_jenkis
Nov 20 at 22:43

Thank you so much!!
– max_jenkis
Nov 20 at 22:43

add a comment |

<div class="row flex-column-reverse flex-md-row">

    <div class="col-md-3">

        sidebar

    </div>

    <div class="col-md-9">

        main

    </div>

</div>

answered Nov 20 at 21:45

Warsame Ali

Thank you! This works om Bootstrap 4!
– max_jenkis
Nov 20 at 21:49

add a comment |

<div class="row flex-column-reverse flex-md-row">

    <div class="col-md-3">

        sidebar

    </div>

    <div class="col-md-9">

        main

    </div>

</div>

answered Nov 20 at 21:45

Warsame Ali

Thank you! This works om Bootstrap 4!
– max_jenkis
Nov 20 at 21:49

add a comment |

<div class="row flex-column-reverse flex-md-row">

    <div class="col-md-3">

        sidebar

    </div>

    <div class="col-md-9">

        main

    </div>

</div>

answered Nov 20 at 21:45

Warsame Ali

<div class="row flex-column-reverse flex-md-row">

    <div class="col-md-3">

        sidebar

    </div>

    <div class="col-md-9">

        main

    </div>

</div>

answered Nov 20 at 21:45

Warsame Ali

answered Nov 20 at 21:45

Warsame Ali

answered Nov 20 at 21:45

Warsame Ali

answered Nov 20 at 21:45

Warsame Ali

Thank you! This works om Bootstrap 4!
– max_jenkis
Nov 20 at 21:49

add a comment |

Thank you! This works om Bootstrap 4!
– max_jenkis
Nov 20 at 21:49

Thank you! This works om Bootstrap 4!
– max_jenkis
Nov 20 at 21:49

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg