Geek Answers Handbook

Bootstrap 3: moving columns between

Currently working on the layout of Bootstrap 3, but I just can't figure out how to create the next layout. This will probably be impossible without repeating the content and hiding it at certain breakout points.

The tablet and desktop should look like this:

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

The mobile view should look like this:

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

So effective, what I'm trying to do is move D over A and E between B and C for a mobile view. I know I can push / pull columns, and moving D above A works fine. However, I cannot figure out how to pull E between B and C. Is this possible?

Has anyone received an offer?

+4
source share
1 answer

, :)

, , Bootstap 3 .col-??-push-* .col-??-pull-*. . 3 , , , . sth. :

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

. bootply.

+4

More articles:


All Articles