CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Atlas
Atlas

Reputation: 185

Reording Columns in Bootstrap 3

I'm working on reordering columns using Bootstrap 3 and getting some unwanted results. I have made a number of attempts to get them in the desired locations using push/pull, adding wrappers, and adding rows with no success. Here's what the layout looks like on medium+ screens:

    |A| B |
    | |C|D|

E.g.: http://www.bootply.com/A9wWGcPFCq

And the code:

<div class="container" id="main">
    <div class="row">
        <div class="col-md-4 col-sm-6" id="red">A<br><br></div>
        <div class="col-md-8 col-sm-12" id="blue">B</div>
        <div class="col-md-4 col-sm-6" id="green">C</div>
        <div class="col-md-4 col-sm-6" id="yellow">D</div>
    </div>
</div>

Here's how I want it to look on small screens:

    |  B  |
    | A| C|
    |  | D|

E.g.: http://www.bootply.com/noUCrEWVtg

What happens with the code in the first link on small screens:

    | A|
    | A|
    |  B  |
    | C| D|

What happens on small screens when using push/pull:

       | A|
       |  |
    B  |
    | C| D|

(A was pushed to the right and B was pulled partially out of the container to the left.)

Can the desired layout be achieved using Bootstrap 3 alone? How?

Upvotes: 1

Views: 31

Answers (2)

Atlas
Atlas

Reputation: 185

Here's one solution I've worked out that involves breaking up the A column, reworking the initial ordering of the objects, then using push/pull to get them all sorted out. If anyone finds a better one, let me know. I'll keep working on it and post if I get something better.

<div class="container" id="main">
    <div class="row">
        <div class="col-md-8 col-md-push-4 col-sm-12" id="blue">B</div>
        <div class="col-md-4 col-md-pull-8 col-sm-6" id="red">A1</div>
        <div class="col-md-4 col-md-push-4 col-sm-6" id="green">C</div>
        <div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6" id="yellow">D</div>
        <div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6" id="red">A2</div>
    </div>
</div>

And a link:

http://www.bootply.com/vU3F0o4q5a

Upvotes: 0

Wellington Zanelli
Wellington Zanelli

Reputation: 1964

Push and pull can be tricky sometimes in Bootstrap. Take a look at this link, it have a lot of problems/solutions regarding the use of the push and pull classes.

Upvotes: 1

Related Questions