CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user3940157
user3940157

Reputation:

Bootstrap 3: Moving columns in between

Currently working on a Bootstrap 3 layout but I just can't figure out how create the following layout. Probably it won't be possible without repeating content and hiding it at certain break points.

Tablet and Desktop view should look like this:

+------+------+
|  A   |  D   |
+------|      |
|  B   +------+
+------|  E   |
|  C   |------+
+------+

Mobile view should look like this:

+------+
|  D   |
|      |
+------+
|  A   |
+------+
|  B   |
+------+
|  E   |
+------+
|  C   |
+------+

So effectively what I'm trying to is move D above A and E between B and C for the mobile view. I know I can push/pull columns and moving D above A works fine. However I can't figure out a way to pull E between B and C - Is that even possible?

Anybody got a suggestion?

Upvotes: 4

Views: 600

Answers (1)

nozzleman
nozzleman

Reputation: 9649

Yes, it is ;)

As you already stated, this can be done using Bootstap 3's .col-??-push-* and .col-??-pull-* classes. For further information, see the respective sections in bootstrap 3's documentation on column ordering, which you might have already discovered. Your code would look sth. like the following:

<div class="row">
    <div class="col-sm-6 col-sm-push-6">
        Content D
    </div>
        <div class="col-sm-6 col-sm-pull-6">
        Content B
    </div>
    <div class="col-sm-6 col-sm-pull-6">
        Content A
    </div>
        <div class="col-sm-6 col-sm-push-6">
        Content E
    </div>
    <div class="col-sm-6">
        Content C
    </div>
</div>

See this working bootply as an example.

Upvotes: 4

Related Questions